1. Custom menu support
The navigation menu feature, introduced in WordPress 3.0, allows for the intuitive creation and maintaining of navigation menus in themes.
At the very least, a standard theme will need a main navigation menu, perhaps in the header and a secondary navigation menu in the footer. To do this, we will register those two menus “Main Menu” and “Secondary Menu”
While this isn’t a particularly new feature, its still nice to wrap it in an if function_exists()
just in case the user is stuck in a pre 3.0 installation:
In the functions.php
file, include the following:
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'main_menu' => __( 'Main Menu', 'cake' ),
'secondary_menu' => __( 'Secondary Menu', 'cake' ),
)
);
}
Now that the Menus are registered, we need to tell the theme where to output them. We’d like the Main Menu to appear in our header. So, in our header.php
file, we include the following code:
<?php if ( has_nav_menu( 'main_menu' ) ) { ?>
<?php $defaults = array(
'theme_location' => 'main_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0 );
wp_nav_menu( $defaults );
?>
<?php } else { ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php } ?>
First, we check to see if we have a menu called ‘main_menu’ defined and if we do, we insert its contents here, otherwise we fallback to the default wp_list_pages()
which we can further customize to display the links as we need.
If you’d like even further customization of the menu, see the WordPress codex page on wp_nav_menu()
function.
We want the secondary menu to appear in the footer, so we open up the footer.php
and include the following code:
<?php if ( has_nav_menu( 'secondary_menu' ) ) { ?>
<?php $defaults = array(
'theme_location' => 'secondary_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0 );
wp_nav_menu( $defaults );
?>
<?php } else { ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php } ?>
2. Featured image function
The featured image function, as the codex explains, allows the author to choose a representative image for Posts, Pages or Custom Post Types.
To enable this functionality, include the following code in your functions.php
:
add_theme_support( 'post-thumbnails' );
We could stop there and leave it up to WordPress to define the thumbnail sizes or we could take control and define them ourselves. We’ll do the latter, obviously!
Let’s say we’re running a magazine site where the featured image will appear in at least 3 different sizes. Maybe one large image if the post is featured or is the newest, a medium sized image if its just a post among the rest and a regular size perhaps to appear elsewhere.
We take advantage of the add_image_size()
function that instructs WordPress to make a copy of our featured image in our defined sizes.
To do this, we add the following to the functions.php
:
// regular size
add_image_size( 'regular', 400, 350, true );
// medium size
add_image_size( 'medium', 650, 500, true );
// large thumbnails
add_image_size( 'large', 960, '' );
3. Add feed links (instead of old RSS code in head)
This one is simple. If you’ve been building WordPress themes for a while, you’ll remember the days when you had to manually include code to output the RSS feed right in the header.php. This approach is cleaner and relies on the wp_head()
action hook to output the necessary code.
In the functions.php
file, include the following:
// Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' );
Make sure that you have
it in the
header.php
, right before end of&rgt;/head&lgt;
4. Define content width
Content width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.
That means, when you paste that YouTube URL in the editor and WordPress automatically displays the actual video on the front end, that video will not exceed the width you set using the $content_width
variable.
if ( ! isset( $content_width ) )
$content_width = 600;
WordPress also recommends the addition of the following CSS:
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
While this is useful, its a bit heavy handed. It defines the content width for all content. What if you wanted videos of a larger width on pages than in posts and an even larger size in a custom post type? Currently, there is no way to define this. There is however a feature request proposing the inclusion of the $content_width
variable into the built-inadd_theme_support()
.
5. Dynamic sidebar
Your typical theme will have at least one sidebar. The code to define the sidebar is pretty straightforward.
Add the following to your functions.php
:
if(function_exists('register_sidebar')){
register_sidebar(array(
'name' => 'Main Sidebar',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
This registers and defines a sidebar named “Main Sidebar” and its HTML markup.
You can learn more about the register_sidebar()
function on the WordPress codex page.
You’ll routinely find the need to have more than that one sidebar so you can just copy/paste the above code and change the name.
There is also a register_sidebars()
function that will allow you to register and define multiple sidebars all at once but it doesn’t give you the flexibility of giving each new sidebar a unique name.
6. Custom “more” link format
If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show [...]
to indicate there’s more “after the jump”.
You will most likely want to add a “more link” and define how that looks.
To do this we need to add the following code to our functions.php
:
function new_excerpt_more($more) {
global $post;
return '...<br /><br /><a href="'. get_permalink($post->ID) . '" class="read_more">read more →</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
This adds an ellipses ‘…‘ right after the excerpt and includes a read more link after two break tags. You can rename and style the read_more
CSS class for the link as desired.
7. Basic pagination
Each theme might have different pagination needs but it’s always safest to start with a nice default functions:
previous_posts_link()
andnext_posts_link()
.function cake_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="<?php echo $nav_id; ?>" class="content_nav clearfix"> <ul> <li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake' ) ); ?></li> <li class="prevPost"><?php next_posts_link( __( 'older →', 'cake' ) ); ?></li> </ul> </nav> <?php endif; }?>
8. Redirect after theme activation
If you have special instructions in your theme eg. in your theme options page that you’d like the user to see when they first activate the theme, you can use the following function to redirect them there:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
wp_redirect('themes.php?page=themeoptions');
Pay special attention to the wp_redirect()
function. Make sure to replace the ‘themes.php?page=themeoptions
‘ with the URL of your page.
9. Hide admin bar (during development)
During development, I sometimes find the WordPress admin (tool) bar to be quite distracting.
It’s in a fixed position at the top of the window and depending on my layout can cover some elements of the header.
While still designing and developing, I like to hide the admin bar with this handy function.
show_admin_bar( false );