• I’m creating a custom theme on WordPress, and while building it I’ve noticed the output started to add &nbsp in seemingly random places. Although one particular place it always adds this is in a nested list.

    <div class="entry_content">
                <p>Nested and mixed lists are an interesting beast. It’s a corner case to make sure that</p>
    <ul>
    <li>Lists within lists do not break the ordered list numbering order</li>
    <li>Your list styles go deep enough.</li>
    </ul>
    <h3>Ordered – Unordered – Ordered</h3>
    <ol>
    <li>ordered item</li>
    <li>ordered item
    <ul>
    <li><strong>unordered</strong></li>
    <li><strong>unordered</strong>
    <ol>
    <li>ordered item</li>
    <li>ordered item</li>
    </ol>
    </li>
    </ul> </li>
    <li>ordered item</li>
    <li>ordered item</li>
    </ol>
    <h3>Ordered – Unordered – Unordered</h3>
    <ol>
    <li>ordered item</li>
    <li>ordered item
    <ul>
    <li><strong>unordered</strong></li>
    <li><strong>unordered</strong>
    <ul>
    <li>unordered item</li>
    <li>unordered item</li>
    </ul>
    </li>
    </ul> </li>
    <li>ordered item</li>
    <li>ordered item</li>
    </ol>
    <h3>Unordered – Ordered – Unordered</h3>
    <ul>
    <li>unordered item</li>
    <li>unordered item
    <ol>
    <li>ordered</li>
    <li>ordered
    <ul>
    <li>unordered item</li>
    <li>unordered item</li>
    </ul>
    </li>
    </ol> </li>
    <li>unordered item</li>
    <li>unordered item</li>
    </ul>
    <h3>Unordered – Unordered – Ordered</h3>
    <ul>
    <li>unordered item</li>
    <li>unordered item
    <ul>
    <li>unordered</li>
    <li>unordered
    <ol>
    <li><strong>ordered item</strong></li>
    <li><strong>ordered item</strong></li>
    </ol>
    </li>
    </ul> </li>
    <li>unordered item</li>
    <li>unordered item</li>
    </ul>
            </div>

    When I view this in both Visual and Text view this space isn’t there. To make sure it wasn’t an error on WordPress I installed a clean theme (random choice but was a theme called cjanky) and the output did not have these added.

    I’m not sure at what stage this started to happen but I do know it was not there when I first started coding.

    Interesting enough I read into how to remove these, and came across a piece of code made for the_excerpt to remove these spaces, and I modifed it to work on the content.

    function hr_trim_excerpt( $output ) {
        // I'm not entirely sure why both str_replace and the use of the Unicode for nbsp are required to rip all non-breaking spaces out, but they are.
        return trim( str_replace( ' ', ' ', $output ), ' \t\n\r\x0B'.chr(0xC2).chr(0xA0) );
    }
    add_filter( 'the_content', 'hr_trim_excerpt' );

    But this did not work, it completely ignored this. (I added this to the bottom of the functions file just to see if it would work)

    I’m pulling the content through get_template_part from a folder, end result code looks like this <?php get_template_part( 'content/content', 'page' ); ?> and the content-page looks like this:

    <div id="post_<?php the_ID(); ?>">
        <article>
    
            <div class="entry_header">
                <header>
                    <?php the_title( sprintf( '<h1 class="entry_title">', esc_url( get_permalink() ) ), '</h1>' ); ?>
                </header>
            </div>
    
            <div class="entry_content">
                <?php the_content(); ?>
            </div>
    
            <?php //comments_template(); ?>
        </article>
    </div>

    Not sure what else to try.

    I checked out the theme to see how they pull through the content and they use a content-page template that looks like this:

    <?php
    /**
     * The template used for displaying page content in page.php
     *
     */
    ?>
    
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <h1 class="entry-title"><?php the_title(); ?></h1>
        </header><!-- .entry-header -->
    
        <div class="entry-content">
            <?php the_content(); ?>
            <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'cjanky' ), 'after' => '</div>' ) ); ?>
            <?php edit_post_link( __( 'Edit', 'cjanky' ), '<span class="edit-link">', '</span>' ); ?>
        </div><!-- .entry-content -->
    </article><!-- #post-<?php the_ID(); ?> -->

    So it looks like it’s doing the same as I did.

    Any theories?

  • The topic ‘Custom theme adding space “ ” in places’ is closed to new replies.