targeting the images and the content in a post separately

5 Views

In my WP theme I want to be able to target (to hang the css in my style.css) the images and content in my single.php.

On single.php it puts the content in through the loop

Read More
  <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'single' ); ?>
        <?php bnNav_content_nav( 'nav-below' ); ?>

  <?php endwhile; // end of the loop. ?>

and on content-single.php 

<div class="container"
  <?php the_content(); ?>
</div>

the content of the post has images and text, but are all outputted in < p > tags. I can target the images sort of to be able to add -margins (messy but then I can have different side margins for the text) But I want to add more uniques styles to each

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. Your images don’t have to be wrapped in paragraphs. You can use the WordPress editor in text-mode to wrap the the images in DIVs.

    enter image description here

    This way you can define styles for the DIVs with images and paragraphs seperatly. If you need this function often you can prepare yourself a quicktag which will insert a div with an image in it for you quickly, even in editors’ visual mode.

    The AddQuicktag-Plugin is a nice tool to work with.

  2. Seems that there’s no specific function to grab media from post body. You could use regex for wrapping/handling images in post content or you could do it with just CSS like this:

    .container p img {
 /*styles here*/
    }

    Also since you mentioned jQuery, you can access post images node list in the same selector way:

    $('.container p img').each(function(){
   //$(this) is and <img tag
})