mardi 5 mai 2015

Targeting specific Wordpress posts in a loop

I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.

index.php code (brings in content.php which has 'post' code)

<div>
<?php if ( have_posts() ) : ?>

        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                get_template_part( 'content' );
            ?>

        <?php endwhile; ?>
        <div class="clearfix"></div>
        <div class="col-md-12">
        </div>
    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>
</div>

content.php code (gets post-title, category, and sets post-thumbnail to background-image)

 <?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="row">
<div class="col-md-12">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php      the_title(); ?></a></h2>
<?php the_category(', '); ?>
</div>    
</div>

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

functions.php (setting image size)

add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');

The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.

Aucun commentaire:

Enregistrer un commentaire