Want to target specific posts in a loop

1 Views

My WordPress site has a loop that creates posts, and I want to target specific posts to change their css values.

html – index.php

Read More
<?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php
      get_template_part( 'content' );
    ?>
<?php endwhile; ?>

content.php 

<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>

<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >

 <div class="container-fluid">
  <div class="col-md-12 text-cell">
   <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php  the_title(); ?></a></h2>
   <?php the_category(', '); ?>
  </div>   
 </div>

</article><!-- /#post -->

It was suggested that I use ‘get_post_meta …’ but I am not familiar with how to use it. I just want to change css values (padding, font-size, etc) for different posts

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I would suggest using Custom Fields for this, so that you can define the values in the post itself, as opposed to having to edit the code every time you add a new post.

    In the post, make sure you have Custom Fields visible (Togglable from screen options at the top)

    Then make a field called “Alignment” or whatever you prefer and assign a value to it. (for example ‘left’)

    Custom Field example

    Then you can add a conditional in the loop.

    <?php $alignment = get_post_meta(get_the_ID(),'Alignment',true);
if($alignment) == 'left'):?>
    <p>Do stuff and things here...</p>
<?php endif;?>

    You can read more about it here: https://codex.wordpress.org/Custom_Fields

    Hopefully that will work for you. If you want to get fancier with it, I would suggest looking at the Advanced Custom Fields plugin, which allows a lot more flexibility and options.

    EDIT from comments:

    1st option:
    Set a field of “ExtraCSS” to “color:green;”
    enter image description here

    <?php $extraCSS = get_post_meta(get_the_ID(),'ExtraCSS',true);?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>'); <?php echo $extraCSS;?>" <?php post_class('container-fluid'); ?> >

    2nd option:

    (In your stylesheet:)

    article:nth-child(2n+0)
{
    color:green;
}

    http://www.w3schools.com/cssref/sel_nth-child.asp