This sidebar is used for any page on the site; for now, it lists a simple subnavigation. To do this, you can use the wp_list_pages() function and pass it the ID of the current page so you can see the child pages in the sidebar. You also need to be able to list the menu when you’re on one of those child pages. You do that using the get_post_ancestors( ) function (you get all the higher-level pages of the current page); with the PHP function end you get the last element in the array. The array of ancestors will always be sorted with the highest ancestor at the end of the array, and for subnavigation you generally want the highest-level parent page. After you have the top-level page information, you can use it to get the title of the subnavigation and pass the ID into the child_of parameter of the wp_list_pages() function to get the subpage navigation.
<aside class="sidebar page-navigation"> <?php
global $post;
$ancestors = get_post_ancestors( $post ); $top = get_post(end($ancestors), "OBJECT"); ?> <h2><?php echo $top->post_title; ?></h2> <ul class="sub-nav"> <?php wp_list_pages('title_li=&child_of='.$top->ID); ?> </ul> </aside>
Last Bits
Now you’ll look at some additional bits added to the template files that you already added code to in the previous chapter: the header, footer, and functions files.
In the header, you have a logo included with the use of the bloginfo tag to get the theme directory and the main menu for the site being included with the wp_nav_menu() function.
<header>
<h1><a href="<?php home_url('/'); ?>"><img src="<?php bloginfo('template_directory'); ?>/ images/logo.png" alt="Pro WordPress Theme Development"></a></h1>
</header>
<nav class="main-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false )); ?> </nav>
The menu 'primary' has been set up in the functions file to allow you to add this to your WordPress admin, and these few functions setting up the site have been moved into a theme setup function, which is common to a lot of WordPress themes.
if ( ! function_exists( 'prowordpress_setup' ) ) : function prowordpress_setup() {
/**
* Add default posts and comments RSS feed links to head */
add_theme_support( 'automatic-feed-links' ); /**
* Enable support for Post Thumbnails */
add_theme_support( 'post-thumbnails' ); /**
* This theme uses wp_nav_menu() in one location. */
Chapter 3 ■ Content options and the Loop
/**
* Enable support for Post Formats */
add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link' ) ); }
endif; // ao_starter_setup
add_action( 'after_setup_theme', 'prowordpress_setup' );
You can check to see whether the function hasn’t already been set up before using the line: if( ! function_exists( 'prowordpress_setup' ) ):
Just in case you’re using a child theme and the function is called somewhere else. In the footer I added a footer tag with a small function I created a while back to add a simple dynamic copyright to the site. This function has been declared in the functions file as well, so it can be used in the theme. It is something that you might consider creating as a plug-in as it’s not going to be unique to this theme, but because it’s so small, it’s not worth the effort.
function simple_copyright () {
echo "© " . get_bloginfo('name') ." ". date("Y"); }
The last addition to your functions file is a function to include the scripts and styles in the web site. I put this in the functions file so it is all in one place, but some people include these functions in the header of the theme, which is fine (I just don’t like the clutter).
/**
* Enqueue scripts and styles */
function prowordpress_scripts_and_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() ); /**
* Better jQuery inclusion */ if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script('jquery'); } }
Summary
Wow, that was an absolutely epic chapter. Apologies for the length, but the Loop and content methods in WordPress are the absolute core of WordPress theme development.
The chapter went into real depth with the WordPress querying method, and I showed you in detail how the WP_Query class operates as well as how to edit and customize the query to get custom content into your templates. With these query methods, you can create extremely powerful queries to display almost any combination of content on your site.
I also covered in great detail how the template tags work in WordPress, covering the main groups and how the template tags work in a variety of ways to output the content the way you want it for your site. As well, I showed you how the body_class and post_class functions can be used to add useful classes to HTML to help create custom designs for content through clean CSS.
Finally, a lot of code was added to your templates to generate the content output for your theme. You should now have the beginnings of a WordPress theme displaying dynamic pages of content from WordPress.
The next chapter looks at how to extend the functionality of WordPress to give you more contextual content through the use of custom post types, custom taxonomies, and custom fields.