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><?php the_title(); ?></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.
i think the best way to to this is by adding a custom field inside your posts, then, in your templates, you call that custom field this way:
get_post_meta($post->ID, 'name_of_your_custom_field', true);
this must be inside the loop.
Related
I'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.
I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="primary" class="<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>">
<div id="feature-container" class="full-width-container">
<div class="full-width-container content-page" id="tagline-wrapper">
<div id="left-black"></div>
<div class="page-width-container">
<div id="tagline-box">
<h1 class="category-title">Transactions</h1>
</div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="project-menu" class="page-width-container">
<?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
</div>
<div id="content" role="main" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="story-container" class="module-container">
<div class="our-story">
<div class="story-image">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="story-text">
<article class="post" id="post-<?php the_ID(); ?>">
<div class="entry-container">
<h2><?php the_title(); ?></h2>
<div class="project-details">
<p><span class="details-location"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-location', true);
wp_reset_query();
?></span><br />
<span class="details-funding"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-type', true);
wp_reset_query();
?> | <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-source', true);
wp_reset_query();
?></span><br />
<span class="details-value"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-value', true);
wp_reset_query();
?></span></p>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>
</div>
</article>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div>
</div><!-- #primary -->
<?php get_footer(); ?>
You can achive above thing using following code:
First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.
<?php $countPost=1;?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?></h2>
<?php if($countPost>2) : /*Condition for Content*/
the_content();
endif;
?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','« Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries »','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>
For more details please refer :
https://codex.wordpress.org/The_Loop_in_Action
I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.
I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.
My Wordpress site has a loop that creates posts, and I want to target specific posts to change their css values.
html - index.php
<?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><?php the_title(); ?></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
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')
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;"
<?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
My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).
index.php - HTML
<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 displays the post in each article (which are stacked on top of each other, full width, down the page)
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)
Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.
If not done yet, enable thumbnails and define custom image sizes:
// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);
To display the thumbnails:
First, get the featured image URL for the post:
The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'
<?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];
}
?>
Then add the image as a background:
<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 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
And finally, apply some CSS to achieve your desired background-size:
article {
background-size: cover;
}
It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>
<div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
References:
http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
I am currently trying to display a post to my homepage from a category, along with an image (featured image).
so far, I have this code which grabs the post and displays it on my homepage:
<div class="row">
<div class="col-md-6">
<?php query_posts('cat=4');
while (have_posts()) : the_post();
the_content();
endwhile;?>
</div>
This does display, but I have now attempted to set a featured image aswell.
I would like it to display like:
I have seen some suggestions such as
<?php the_post_thumbnail(); ?>
but i'm not 100% where to add this.
Super thanks in advance!
You should do something like this:
<div class="row">
<div class="col-md-6">
<?php query_posts('cat=4');
while (have_posts()) : the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
the_content();
endwhile;?>
</div>
You will probably need to wrap the_content and the_post_thumbnail in divs and style with CSS or use the column classes from your theme
You can try this, untested though. I left the args as an array in case you had others to add.
<div class="row">
<div class="col-md-6">
<?php
$args = array( 'cat' => 4 );
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<div style="float: left;">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
</div>
I am pretty new in WordPress development and I am trying to implement this custom theme that handle the so called featured posts: http://lnx.asper-eritrea.com/
As you can see in the posts area of the homepage I have the Articoli in evidenza sub area that contains my featured posts and under it the Ultimi Articoli subarea that contains the latest posts.
To implment this I use the posts tag and in the futured posts area I show the posts having the tag=featured condition.
So this is my code:
<section id="blog-posts">
<header class="header-sezione">
<h2>Articoli in evidenza</h2>
</header>
<?php query_posts('tag=featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<header class="header-sezione">
<h2>Ultimi Articoli</h2>
</header>
<?php
if (have_posts()) :
// Start the Loop.
while (have_posts()) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part('content', get_post_format());
endwhile;
else :
// If no content, include the "No posts found" template.
get_template_part('content', 'none');
endif;
?>
</section>
As you can see first I show the posts having a tag featured by the use of query-posts() function:
<?php query_posts('tag=featured');?>
Now my problem is that if a post have the featured tag I don't want that it is shown in the latest post area (at this time it is shown). So I tried to use this code:
<header class="header-sezione">
<h2>Ultimi Articoli NOT FEATURED</h2>
</header>
<?php query_posts('tag != featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
But don't work and the featured post still shown in the homepage. As you can se I tried so specify that, to be shown, a post can't have the featured tag:
<?php query_posts('tag != featured');?>
Why don't work? What am I missing? Can you help me to fix this issue?
Tnx
To return posts that do not contain a particular tag, you should use pass the ID of the term into the tag__not_in argument.
// get the term using the slug and the tag taxonomy
$term = get_term_by( 'slug', 'featured', 'post_tag' );
// pass the term_id to tag__not_in
query_posts( array( 'tag__not_in' => array ( $term->term_id ) );
is_front_page()
You should try <?php is_front_page(); ?> or vice versa.
http://codex.wordpress.org/Function_Reference/is_front_page
<?php if (is_front_page()) { ?>
<!-- Do something -->
<?php } else { ?>
<!-- Add else only if you need it! -->
<?php } ?>