Wordpress Loop (the_content)

Question

I'm creating a theme using wordpress, but i'm a little confused how php the_content(); works.

In the example below, the function retrieves all the content for a single post. This is wrapped in a div 'entry-content'. This allows me to style the content

<div class="entry-content">
        <?php the_content(); ?>
    </div><!-- .entry-content -->

But what if I have a number of divs WITHIN the_content, for example some images may have a div id="image-small" others may have a div "image-large"

Does this mean that I have to copy and paste all my HTML markup into wordpress back end using the 'text' tab. This way, all my markup including divs will be stored in the DB and retrieved and injected into the page using the the_content() function

This seems like a very poor way of making the template work.

1) Your storing messy markup in the DB

2) Users can edit the markup and break the template via (the text tab)

Is there a better solution, have I misunderstood how WP works? Do people store markup in the BD via the back end (wordpress ui)

Many thanks

Answer 1

Yes, you are correct that you are storing some markup in the db and that, in theory, a user could break the template. In practice, however, you rarely see this happening.

However, the idea is that there should be very little markup inside the content. You might see styling related to an image, table, or form, but very little else.

In fact, wordpress is generally meant to be used with the WYSIWYG editor which would add a bit of markup as you insert images but generally won't break your larger template.

Answer 2

Yes it stores markup in the DB.

You can also break your content into different custom fields and display these fields wherever you want in the template. So the markups you use for layout are stored in the template and not in the DB.

You can create custom field or meta box for that. If you don t want to code, there s a very popular plugin: http://www.advancedcustomfields.com/

Answer 3

generally, you don't supposed to use the editor for template design, use it for content.

for template design, change the template file, for example, if it's about "post", so change "single.php" file for this.

But what if I have a number of divs WITHIN the_content, for example some images may have a div id="image-small" others may have a div "image-large"

the images already have class with the image-size you choose, so you don't need to wrap it with a div and give it a size class, if for some reason you want to affect only specific image so you have class with image id for every image.

if you need to, you can install TinyMCE Advanced, it will give you an option to add specific classes to editor and use it for design specific parts inside the editor, for example: if you want to add border radius to some image in the editor you can add the class border_radius to the editor by put this code into your "functions.php" file:

add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => __('Border Radius', 'your_theme'),
            'selector' => 'p',
            'classes' => 'border_radius',
        )
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

you will see in the editor under "format" tab > "formats" the class "border-radius", now add it to the image / other element you want.

add the class to the CSS style file with the settings you want and you done.