Are you new to WordPress and looking to tweak your theme or create a brand new one? WordPress offers a variety of built-in tools called template tags that can give you a head start. In this guide, we’ll walk you through everything you need to know to get started with WordPress theme development.
Before you begin, it’s important to understand that WordPress uses a powerful templating engine that enables developers to design visually appealing websites. Whether you opt for free or premium themes, each WordPress theme comes with numerous customization options. These options allow you to personalize your site by adjusting colors, adding header images, configuring navigation menus, and more.
However, sometimes you may find that you need to make specific changes to your WordPress theme that require some coding knowledge in PHP, HTML, and CSS. It’s a good idea to familiarize yourself with how WordPress operates behind the scenes and get acquainted with common WordPress theme templates.
To ensure you’re following best practices, consider creating a child theme instead of directly modifying your theme files. This approach helps you maintain the integrity of your theme while allowing for customizations without affecting the original theme.
To practice and experiment with themes, you can install WordPress locally on your computer using software like XAMPP or MAMP.
Now, let’s delve into the essential components of our WordPress theme cheat sheet for beginners.
Basic WordPress Theme Templates
Every WordPress theme consists of various template files, each serving a specific purpose. While every theme must include a stylesheet (style.css) and an index file (index.php), you’ll typically find several other key files:
header.php: Controls the header section of your site.footer.php: Controls the footer section of your site.single.php: Displays individual blog posts.page.php: Handles individual static pages.comments.php: Manages comments on your site.functions.php: Contains PHP functions and defines theme features.archive.php: Displays archive pages.searchform.php: Manages the search form.search.php: Handles search results.sidebar.php: Manages widgets and sidebars.404.php: Displays the error page when a page is not found.
If you’re building your own theme, consider starting with a WordPress starter theme. These starter themes provide pre-built WordPress template files and CSS, offering a solid foundation for your customization efforts.
Template Tags in Header
WordPress includes useful functions known as template tags, which are crucial for outputting various elements across your theme. One of the most important template tags required in all compliant WordPress themes is wp_head(). This function fetches essential HTML code that WordPress needs to add to the <head> section of every page on your website. It’s also necessary for many WordPress plugins to function correctly.
Here are some commonly used template tags that you’ll frequently encounter and utilize in your theme’s header.php file:
<?php bloginfo('name'); ?>: Outputs the title of your blog or site.<?php wp_title(); ?>: Displays the title of a specific page.<?php bloginfo('url'); ?>: Provides the exact URL of your site.<?php bloginfo('description'); ?>: Outputs the site’s description.<?php bloginfo('template_url'); ?>: Indicates the location of your theme’s file.<?php bloginfo('stylesheet_url'); ?>: Provides the link to yourstyle.cssfile.<?php bloginfo('rss2_url'); ?>: Outputs the RSS feed URL for your site.<?php bloginfo('pingback_url'); ?>: Provides the pingback URL for your site.<?php bloginfo('version'); ?>: Displays the current WordPress version number.
Template Tags Used in Other Theme Files
In addition to the header, template tags are used throughout various theme files to include and display content. For example:
<?php get_header(); ?>: Includes theheader.phpfile content.<?php get_footer(); ?>: Includes thefooter.phpfile content.<?php get_sidebar(); ?>: Includes thesidebar.phpfile content.<?php comments_template(); ?>: Includes thecomments.phpfile content.
Within the WordPress loop, these template tags are used to display specific content, excerpts, and metadata from your posts. For instance:
<?php the_content(); ?>: Displays the content of a post.<?php the_excerpt(); ?>: Displays the excerpt used in posts.<?php the_title(); ?>: Outputs the title of a specific post.<?php the_permalink(); ?>: Provides the link of a specific post.<?php the_category(', '); ?>: Displays the category of a specific post.<?php the_author(); ?>: Outputs the author of a specific post.<?php the_ID(); ?>: Displays the ID of a specific post.<?php edit_post_link(); ?>: Provides an edit link for a post (visible to logged-in users with editing privileges).<?php next_post_link(' %link '); ?>: Provides the URL of the next page.<?php previous_post_link('%link'); ?>: Provides the URL of the previous page.
WordPress Themes and Widget-Ready Areas
WordPress themes come with widget-ready areas called sidebars, where users can easily add and customize widgets. Typically located on the right or left side of the theme layout, these areas offer flexibility in enhancing your site’s functionality.
To display a sidebar in your theme, use the following code:
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
Replace sidebar-1 with the specific name defined by your theme for that widget-ready area.
Template Tags to Display Navigation Menus
WordPress boasts a robust menu management system that allows users to create and manage navigation menus effortlessly. Your WordPress theme can support multiple navigation menu locations, each customizable to suit your site’s layout and design.
To display a navigation menu in your theme, use this code:
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class'
) );
Customize my-custom-menu to match the name your theme uses to register the navigation menu. The container_class can be adjusted to style your navigation menu according to your preferences.
Miscellaneous Template Tags
Here are additional template tags commonly used across WordPress themes:
<?php echo get_the_date(); ?>: Displays the date a current post was written.<?php get_the_modified_time(); ?>: Displays the last time a post was modified.<?php the_modified_time('F d, Y'); ?>: Outputs the last modified time for a post.<?php the_post_thumbnail(); ?>: Displays the post thumbnail or featured image.<?php wp_get_archives(); ?>: Outputs monthly archives.<?php wp_list_categories(); ?>: Displays a list of categories.<?php echo get_avatar( 'email@example.com', 32 ); ?>: Displays the Gravatar of a user from an email address (adjust the size as needed).<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>: Displays the Gravatar of the current post’s author (adjust the size as needed).
Conditional Tags in WordPress Themes
Conditional tags are functions that return results as True or False based on certain conditions. These tags are invaluable for implementing conditional logic throughout your theme or plugin.
For example, you can use conditional tags to check if a post has a featured image and display a default image if none is found:
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';
}
Here are a few more conditional tags commonly used in WordPress themes:
is_single(): Checks if a single post is being displayed.is_page(): Checks if a page is being displayed.is_home(): Checks if the main blog page is displayed.is_front_page(): Checks if a static front page is displayed.is_user_logged_in(): Checks if the current viewer is logged in.
For a comprehensive list of conditional tags, refer to the WordPress Codex page dedicated to conditional tags.
The WordPress Loop
The WordPress Loop, also known simply as “The Loop,” is fundamental to fetching and displaying posts in WordPress. Many template tags within WordPress themes work exclusively within The Loop, as they are tied to post or post_type objects.
Here’s an example of a basic WordPress Loop:
if ( have_posts() ) :
while ( have_posts() ) : the_post();
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> the_title(); </a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
endwhile;
else :
?>
<p>Sorry, no posts matched your criteria.</p>
<?php
endif;
?>
In this loop, WordPress checks if there are posts matching the query. If found, it iterates through each post and displays its title, date, author, content, categories, tags, and comment link. If no posts match the query, it displays a message indicating no matching posts were found.
This detailed guide covers the essentials of WordPress theme development, offering a comprehensive overview of template tags, theme templates, conditional tags, and The Loop. Use this cheat sheet as a reference to enhance your understanding and proficiency in customizing WordPress themes to suit your needs.
