Conditional Classes for Wordpress loop posts - php

The css is already declared all I have to do is add some div classes. My theme uses an almost empty index.php with no html but uses the get_template_part functions and calls various template parts for post types, so it has several loop{template-name}.php files. I have copied the one for the blog index and made a new loop with modifications. The index for my blog, calls the appropriate template with the modifications - hooray. However I have to be able to conditionally add div classes to make the conversion work completely.
As the index.php for the blog runs through the loop I would like to be able to conditionally add one div class to the 1st returned post, and another div class to the 2nd and if the last post is odd then add a 3rd div class.
Here is my loop-template4.php file.
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div class="one"> /*I added this line here and it works for not found.
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'smpl' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found
for the requested archive. Perhaps searching will help find
a related post.', 'smpl' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div>
</div><!-- #post-0 -->
<?php endif; ?>
<?php
<?php while ( have_posts() ) : the_post(); ?>
/**
* I need to conditionally add one of 3 div classes here:
* odd `<div class="one_half">`,
* even `<div class="one_half last">`or
* odd and last, `<div class="one">`
*/
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" title="
<?php printf( esc_attr__(
'Permalink to %s', 'smpl' ), the_title_attribute( 'echo=0' ) );
?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<?php do_action('skeleton_post_meta'); ?>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for
archives and search. ?>
<div class="entry-summary clearfix">
<?php if (ot_get_option('show_post_thumbnails') && has_post_thumbn
nil()){
echo '<div class="alignleft">';
skeleton_thumbnailer('fourthree');
echo '</div>';
}?>
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
if (ot_get_option('show_post_thumbnails') && has_post_thumbnail()) {
echo '<div class="alignleft">';
skeleton_thumbnailer('thumbnail');
echo '</div>';
}?>
<?php //the_content( __(
'Continue reading <span class="meta-nav">→</span>', 'smpl' ) );
do_action('skeleton_content');
?>
<div class="clear"></div>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' .
__( 'Pages:', 'smpl' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
</div> <!-- conditional div class -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; // End the loop. Whew. ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) {
do_action('skeleton_page_navi');
}?>
So the Question:
Is it possible, as the loop hasn't looped yet, and I need to conditionally add the div class based on the number of results from the loop?

As far as I know, there's no way to know when the last post in the loop is being displayed, so first we need to add some code right before your line `while (have_posts()) : the post(). For context, I've copied your entire block of code here, and have added comments to show where the new code is:
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div class="one"> /*I added this line here and it works for not found.
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'smpl' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found
for the requested archive. Perhaps searching will help find
a related post.', 'smpl' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div>
</div><!-- #post-0 -->
<?php endif; ?>
<?php
/**
* BEGIN: Additional code to add conditional classes
*/
// How many posts are going to be displayed? Let's count here:
$total = 0;
while ( have_posts() ) : the_post();
$total++;
endwhile;
// Reset the loop to actually start displaying them
rewind_posts();
// Add this line before your loop to prevent notices being thrown
$count = 1;
while ( have_posts() ) : the_post(); ?>
<?php
// Add some conditions to determine the class
if ($count % 2) {
// If the post displayed is an odd number
$class = 'one_half last';
} else {
// If the post displayed is an even number
$class = 'one_half';
}
if ($count == $total && ($count % 2)) {
// If the post is the last post, and it is odd
$class = 'one';
}
// Finally, increment the count
$count++;
?>
<?php // If you need an extra div, just put it in like so... ?>
<div class="<?php echo $class; ?>">
<?php
// If you need the existing div to simply have the class added,
// Then we pass it into the post_class() function
?>
<div id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>
<h2 class="entry-title">

Related

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><?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.

Wordpress excerpt's Read More takes me to the same excerpt again

My problem is the "Read on" button that is shown under every excerpt, is redirecting me to the same excerpt, too, instead of taking me to the full post. I have a complete suspect of my code, it's probably 100% different to those codes I've seen around on tutorials for adding Excerpt, for example I don't require using the < ?php the_content(); ?> to display the post, or < ?php the_excerpt(); ?> for the excerpt. I'm no longer able to reach the developer who did the work so I'm just lost. To my best knowledge, you will need the Index.php to look at, so here you go.
Index.php:
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* #link http://codex.wordpress.org/Template_Hierarchy
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<article data-menu-block="news" class="homepage_news dark_bg">
<div class="inner_wrapper row">
<div class="left_column">
<h5>LATEST NEWS <span class="red">\</span></h5>
<div class="news_list">
<ul>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php if ( current_user_can( 'edit_posts' ) ) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php printf( __( 'Ready to publish your first post? Get started here.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
</div><!-- .entry-content -->
<?php else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Take a look on content.php file in your theme folder.
<?php get_template_part( 'content', get_post_format() ); ?>
The above part load the external php file which is located in your theme folder. Most probably, there are more files exists like content-page, content-tags etc. depands of your developer.

How to don't show post having a specified tag in my homepage?

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 } ?>

Wordpress footer not showing live but does locally

I created a child theme for twenty twelve and added some stuff in there. Now locally it looks fine, the footer is showing up normally.
Though when I added my theme to my server and selected it as a theme the footer is not showing. When I look at the source code the footer is not being loaded.
Now I have my page.php like this;
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Which is basically the twenty twelve page file. I edited my content file a bit and that is now this;
<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Featured post', 'twentytwelve' ); ?>
</div>
<?php endif; ?>
<header class="entry-header">
<?php the_post_thumbnail(); ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="date"><?php echo get_the_date('d') ?> <?php echo get_the_date('M') ?> '<?php echo get_the_date('y') ?></div>
<?php else : ?>
<h1 class="entry-title">
<?php the_title(); ?>
<div class="date"><?php echo get_the_date('d') ?> <?php echo get_the_date('M') ?> '<?php echo get_the_date('y') ?></div>
</h1>
<?php endif; // is_single() ?>
</header><!-- .entry-header -->
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( '<span class="readmore">Lees verder <span class="meta-nav">→</span></span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<footer class="post-footer">
<ul class="post-info-meta">
<li class="post-info-comment"><div class="post-comment"><?php comments_popup_link( __('0 Reacties','twentytwelve'), __('1 Reactie','twentytwelve'), __('% Reacties','twentytwelve') ); ?></div></li>
</ul>
</footer><!-- .post-footer --> </article><!-- #post -->
But as far as I know the footer is called in the page.php and not the content file, correct? Now why is this not showing up? The theme is on http://allesovereline.nl and I don't see any errors that seem to be caused by any of the files I edited either.
These are the errors;
[Error] SyntaxError: Unexpected token '<' (www.allesovereline.nl, line 384)
[Error] TypeError: 'undefined' is not a function (evaluating 'this.ajaxForm')
wpcf7InitForm (scripts.js, line 14)
(anonymous function) (scripts.js, line 10)
c (jquery.js, line 3)
fireWith (jquery.js, line 3)
ready (jquery.js, line 3)
q (jquery.js, line 3)
[Error] SyntaxError: Unexpected token '<' (www.allesovereline.nl, line 384)
[Error] TypeError: 'undefined' is not a function (evaluating 'this.ajaxForm')
wpcf7InitForm (scripts.js, line 14)
(anonymous function) (scripts.js, line 10)
c (jquery.js, line 3)
fireWith (jquery.js, line 3)
ready (jquery.js, line 3)
q (jquery.js, line 3)
Does anyone have a clue why this is happening?
What I have tried so far:
Disabling all the plugins.
Selecting Twenty Twelve (works fine, footer is showing there.)
Enabling the error log but it's not making an error file.

Link Wordpress post images to post

I'm developing a wordpress theme for my blog and I'm having some difficulty.
When I make a new post, the first image of that post is displayed on the homepage. When the image is clicked, it links to the image file and shows the full size. I would like for it to automatically link to the post from which it came. I understand that you can choose what the image links to upon upload or in the editor. I would like for the images to link to their original post automatically, since I have other people writing on my blog, and I don't want them to have to do this each time.
As I understand it the content.php file controls the post format in this case. Here is the file from my theme. Or is it possible to use a function?
<?php
/**
* The default template for displaying content single/search/archive
*
* #package test
* #since test 0.1.0
*/
?>
<!-- START: content.php -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<?php the_post_thumbnail(); ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php endif; // is_single() ?>
</header><!-- .entry-header -->
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php posted_on(); ?>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="label radius secondary"><?php _ex( 'Featured', 'Post format title', 'test' ); ?></span>
<?php endif; ?>
</div><!-- .entry-meta -->
<?php endif; ?>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'test' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'test' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<footer class="entry-meta">
<?php if ( 'post' == get_post_type() ) : ?>
<?php get_template_part('entry-meta', get_post_format() ); ?>
<?php endif; ?>
</footer><!-- #entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
<!-- END: content.php -->
https://codex.wordpress.org/Function_Reference/the_post_thumbnail
example 1. To link Post Thumbnails to the Post Permalink in a specific loop, use the following within your Theme's template files:
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>

Categories