What is a WordPress Content Wrapper?

Posted by:

What is a WordPress Content Wrapper? by KulfiSoftware

What is a WordPress Content Wrapper? A wrapper is an element, commonly a div, that encloses one or more other
elements in the HTML markup, e.g.:

  1. <div id=“wrap”>
  2. <h1>Headline</h1>
  3. <p>Paragraph</p>
  4. <p>Paragraph</p>
  5. </div>

Useful Plugin for WordPress: https://wordpress.org/plugins/wp…

What is a WordPress Content Wrapper

Let’s See!

First off, let’s define where the content lives on a WordPress post. The below snippet is what is called The Loop as well as some codes.

  1. <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
  2.  
  3. // CONTENT
  4.  
  5. endwhile; else : ?>
  6. <p><?php esc_html_e( ‘Sorry, no posts matched your criteria.’ ); ?></p>
  7. <?php endif; ?>

Describing It!

The // CONTENT comment is where all the code would go that shows various different pieces of data from the post. For example, to show the Title and the Content of the post, you’d do something like but it is not hard.

 

This will dynamically output the title of the post inside of an <h1> as well as output the entire content of the post.

To wrap the entire section of content (in this particular instance, I would use two), I would wrap the entire WordPress Loop with a <div> with an appropriately named class as well as just the content but it is helpful.

 

The entire block has been wrapped with a .ccc-post class and the content has been wrapped with a .ccc-post__content class as well as with the codings.

Side note: I personally adhere closely to the BEM methodology of naming my CSS classes (BEM 101 | CSS-Tricks)

0

Add a Comment