Advertisement
Creative Coding

Using Conditional Tags to Supercharge Your Blog

by

Conditional Tags are one of the many great structures that WordPress has to help us develop for WordPress easier. In this article, we're going to get to know some of them and use them in example functions like removing things from the error pages or changing the favicon of admin pages.


What Are "Conditional Tags"?

They are basically "yes-no questions": They return only TRUE or FALSE when you use them. We use them in if statements – if the statement is TRUE or FALSE, we can process our code according to the answer.

You can see all the Conditional Tags in the WordPress Codex.

Now, let's get to the fun part! There are ten great functions using Conditional Tags in this article.


Function 1. Display a Popup Message in the Front Page With is_front_page()

Greeting the visitor from the home page could be pleasant for the visitor, or you can place a warning for scheduled maintenance, or you can show a horrendous popup ad. Whichever you need to do, here's how you do it:

First, you need to get the Colorbox jQuery plugin here. Get colorbox.min.js from the "colorbox/colorbox" folder and the colorbox.css (and the corresponding "images" folder) to a "colorbox" folder inside your theme folder.

Then, you need to create a colorbox.load.js file in order to load the popup. Place this file into the "colorbox" folder, too:

jQuery(document).ready(function($) {
	var $popup = $("#mypopup");
	$.colorbox({href:$popup});
});

After that, place your popup HTML code (with the "mypopup" ID for CSS) inside your theme's index.php file and hide it in your style.css file (with "#mypopup {display:none;}").

function front_popup() {
	if(is_front_page()) {
		// load colorbox.min.js
		wp_enqueue_script('colorbox-js', get_template_directory_uri().'/colorbox/colorbox.min.js',array('jquery'));
		// load colorbox.load.js
		wp_enqueue_script('colorbox-load-js', get_template_directory_uri().'/colorbox/colorbox.load.js',array('colorbox-js'));
		// load colorbox.css
		wp_enqueue_style('colorbox-css', get_template_directory_uri().'/colorbox/colorbox.css');
	}
}
add_action('wp_head','front_popup');

Paste this into your functions.php file and you're good to go!

Note: In order to make your popup go away, you need to add a link inside your popup. This will do just fine:

<a href="javascript:$.colorbox.close();">Close</a>

Function 2. Include Extra CSS and JS Code Inside a Specific Page With is_page()

You may need to load some external JavaScript or CSS files for a specific page – like your "About" page or a download page for your product. Yes, you can also include them in your content but it's not good practice. Here's the good practice:

function extra_assets() {
	if(is_page(123)) { // '123' is the ID of the page we are checking for
		wp_enqueue_script('my-script', get_template_directory_uri().'/some/path/in/your/theme/folder/script.js');
		wp_enqueue_style('my-style', get_template_directory_uri().'/some/path/in/your/theme/folder/style.css');
	}
}
add_action('wp_head','extra_assets');

Like the first example, adding this into your functions.php file is enough. (Don't forget to change the "123" number with your page's ID!)


Function 3. A "More From This Category" Section for Posts in a Special Category With in_category()

It's not always necessary, but you may need a "More From This Category" section for a category (but not the other ones). Say, you have a "News" category and the other categories are not suitable for the section we're going to create. The Conditional Tag in_category() will help us with that:

function more_from_category($cat_ID) {
	if(in_category($cat_ID) {
		$posts = get_posts('numberposts=5&category='.$cat_ID);
		$output = '<h3>More from this category</h3>';
		$output.= '<ul>';
		foreach($posts as $post) {
			$output.= '<li><a href="'.get_permalink().'">'.get_the_title.'</a></li>';
		}
		wp_reset_query();
		$output.= '</ul>';
		echo $output;
	}
}

Build this function as you like and add it into your functions.php file. Then, go to the single.php and place the code (<?php more_from_category(123); ?>) where you want the section to appear. All you need to consider is to place the code inside The Loop. That's all!


Function 4. Remind Yourself (Or Your Authors) That You're Still on the Preview Page With is_preview()

This is not a must (after all, we're just learning examples for these Conditional Tags) but it might be a good idea to remind yourself (or your authors) that the page displayed is the "preview" page. Add this into your theme's functions.php file:

function preview_warning() {
	if(is_preview()) {
		echo '<div id="preview-warning">Remember, you\'re still on the Preview page!<div>';
	}
}
add_action('the_content','preview_warning');

Of course, this is not enough – you need to edit the style.css to give a shape to the warning text. Something like this:

#preview-warning {
	background:#800;
	line-height:50px;
	font-size:30px;
	font-weight:bold;
	text-align:center;
	position:fixed;
	bottom:0;
}

There you go!


Function 5. Remove Certain Elements From Your 404 Pages With is_404()

This one is the easiest tip of all. I don't think it even needs an explanation – just wrap those "certain elements" (things that you don't want to show on your error pages, like ads) with the code below and you're good to go!

if(!is_404()) {
	// Here comes the "certain elements". It's that easy. Seriously.
}

Function 6. Never Show Auto-Generated Excerpts Again With has_excerpt()

I just hate the auto-generated excerpts. So I remove them – with the code actually provided from the Codex:

function full_excerpt() {
	if (!has_excerpt()) {
		echo '';
	} else { 
		echo get_the_excerpt();
	}
}

Add this into the functions.php file and then all you have to do is change the instances of the_excerpt() with full_excerpt().


Function 7. List Only the Post Titles (Instead of Full Posts) on Date-Based Archives With is_date()

Sometimes, listing just the titles is more than enough on certain archive pages – like the date-based archives. So, for example the Conditional Tag is_date(), we will get rid of the stuff in The Loop except the title.

This is kind of tricky since the archive.php files are different in each theme. (And if there's a date.php file in your theme, you should edit that one.) Look for The Loop in the code and change the code inside The Loop with this:

if(is_date()) {
	// If your theme uses h2 headings for post titles, use h2. If it uses h1, use h1.
	echo '<h2>'.the_title().'</h2>';
} else {
	// ...
	// The original code inside The Loop
	// ...
}

Function 8. A Separate Favicon for Your Admin Panel With is_admin()

This tip could be quite handy if you like to work with 20 open tabs, all for your blog. Just edit your favicon a little bit and save it as adminfav.ico – for example, my admin panel favicon is just the red version of my original favicon.

Anyways, here's how you do it:

function admin_favicon() {
	if(is_admin()) {
		echo '<link rel="shortcut icon" href="'.get_bloginfo('url').'/adminfav.ico" />';
	}
}
add_action('admin_head','admin_favicon');

Function 9. Show a Default Thumbnail if the Post Doesn't Have One With has_post_thumbnail()

This is kind of a must for a good theme. If you have any part in your theme where the featured images' thumbnails are shown, you should replace the the_post_thumbnail() functions with the code below:

if(has_post_thumbnail()) {
	the_post_thumbnail();
}
else {
	echo '<img src="'.get_template_directory_uri().'/images/default-thumb.jpg" alt="'.get_the_title().'" class="default-thumb" />';
}

This way, you can keep the consistency of your theme's looks.


Function 10. Show a Special Menu for Your Logged in Members With is_user_logged_in()

If you use the membership system in WordPress and have members, you may want to create a special menu just for your logged in members. Here's how:

function member_menu() {
	if(is_user_logged_in()) {
		echo '<div class="member-menu"><h2>Member Menu</h2><ul><li><a href="#">First Menu Item</a></li><li><a href="#">Second Menu Item</a></li><li><a href="#">Third Menu Item</a></li></ul></div>';
	}
}

This is a standard "title & list" code, you should play with the code to make it like your sidebar divs and then place the code <?php member_menu(); ?> in your theme's sidebar.php file.

Also, this is just an example, but ideally you would use WordPress custom menus with wp_nav_menu() here. One standard and one for members, then you can continue to manage them from your WordPress admin dashboard. You can read more about the wp_nav_menu() function here.


Any other ideas?

These were my favourite 10 ideas to use Conditional Tags. What about yours? If you have anything to share, please comment below so we can extend this post with more ideas!

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding NavigationCreating wordpress theme from html 400
    If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…