Understanding theme structure

The rest of this chapter provides important information about the steps to building a WordPress theme, but here is an overview of the templates that make up a WordPress theme and where you find them, both on your server and within your WordPress Dashboard. Follow these steps:

1. Connect to your web server via FTP and have a look at the existing WordPress themes on your server.

   The correct location is /wp-content/themes/ (see the right side of Figure 9-1). When you open this folder, you find the /twentyfifteen theme folder.

   If a theme is uploaded to any folder other than /wp-content/themes, it won’t work.

2. Open the folder for the Twenty Fifteen theme (/wp-content/themes/twentyfifteen ) and look at the template files inside.

   When you open the Twenty Fifteen theme folder, you see several files. At minimum, you find these five templates in the default theme:

   • Stylesheet (style.css)
   • Header template (header.php)
   • Main Index (index.php)
   • Sidebar template (sidebar.php)
   • Footer template (footer.php)

   These files are the main WordPress template files, and I discuss them in more detail in this chapter. There are several other template files, however, and you should try to explore them all if you can. Take a peek inside and see the different template functions they contain. These filenames are the same in every WordPress theme. See the “Contemplating the Structure of a WordPress Website” section later in this chapter for more information about these template files.

3. Click the Editor link on the Appearance menu to look at the template files within a theme.

   This Edit Themes page lists the various templates available within the active theme. (Figure 9-2 shows the templates in the default Twenty Fifteen theme.) A text box on the left side of the screen displays the contents of each template, and this box is also where you can edit the template file(s). To view and edit a template file, click the template name in the list on the right side of the page.

The Edit Themes page also shows the HTML markup (see Chapter 10) and template tags within the template file. These tags make all the magic happen in your website; they connect all the templates to form a theme. The next section of this chapter discusses these template tags in detail, showing you what they mean and how they function. The “Putting a Theme Together” section later in this chapter provides steps for putting them all together to create your own theme (or edit an existing theme).

Below the text box on the Edit Themes page is a drop-down menu labeled Documentation. Click the arrow on the right side of the menu, and a list drops down that contains all of the template tags used in the template you’re currently viewing. This list is helpful when you edit templates and it gives you some insight into some of the different template tags used to create functions and features within your WordPress theme. ( Note: The Documentation menu does not appear when you view the Stylesheet because no template tags are used in the style.css template — only CSS, which I cover in Chapter 10.)

Connecting templates

The template files don’t work alone; for the theme to function, the files need one another. To tie these files together as one working entity, you use template tags to pull the information from each template — Header, Sidebar, and Footer — into the Main Index. I refer to this procedure as calling one template into another. (You can find more information in the “Getting Familiar with the Four Main Templates” section later in this chapter.)

The Header template

The Header template is the starting point for every WordPress theme because it tells web browsers the following:

• The title of your blog
• The location of the CSS
• The RSS feed URL
• The blog URL
• The tagline (or description) of the website

Every page on the web has to start with a few pieces of code. In every header.php file in any WordPress theme, you find these bits of code at the top:

• The DOCTYPE (which stands for document type declaration) tells the browser which type of XHTML standards you’re using. The Twenty Fifteen theme uses <!DOCTYPE html>, which is a declaration for W3C standards compliance mode and covers all major browser systems.
• The <html> tag (HTML stands for Hypertext Markup Language) tells the browser which language you’re using to write your web pages.
• The <head> tag tells the browser that the information contained within the tag shouldn’t be displayed on the site; rather, that information is about the document.

In the Header template of the Twenty Fifteen theme, these bits of code look like the following example, and you should leave them intact:

<!DOCTYPE html>

<html <?php language_attributes(); ?> class="no-js">

<head>

On the Edit Themes page, click the Header template link to display the template code in the text box. Look closely and you see that the <!DOCTYPE html> declaration, <html> tag, and <head> tag show up in the template.

The <head> tag needs to be closed at the end of the Header template, and the closing tag looks like this: </head>. You also need to include a fourth tag, the <body> tag, which tells the browser where the information you want to display begins. Both the <body> and <html> tags need to be closed at the end of the template files (in the footer.php), like this: </body></html>.

Creating title tags

Here’s a useful tip about your site’s <title> tag: Search engines pick up the words used in the <title> tag as keywords to categorize your site in their search engine directories.

The <title></title> tags are HTML tags that tell the browser to display the title of your website in the title bar of a visitor’s browser. Figure 9-4 shows how the title of my personal blog sits in the title bar of the browser window. The title bar is the top bar in your browser. In Figure 9-4, it says Lisa Sabin-Wilson — Designer, Author: WordPress For Dummies.

Search engines love the title bar. The more you can tweak that title to provide detailed descriptions of your site (otherwise known as search engine optimization, or SEO), the more the search engines love your blog site. Browsers show that love by giving your site higher rankings in their results.

The blog <title> tag is the code that lives in the Header template between these two tag markers: <title></title>. In the default Twenty Fifteen theme, this bit of code looks like this, and is found in the functions.php template file of the theme:

add_theme_support( ‘title-tag’ );

The add_theme_support( ‘title-tag’ ); in the functions.php template tells WordPress to place the title tag in the <head> section of the website.

It may help for me to put this example into plain English. The way the add_theme_support( ‘title-tag’ ); function displays the title is based on the type of page that’s being displayed — and it shrewdly uses SEO to help you with the browser powers that be.

The title bar of the browser window always displays your site name unless you’re on a single post page. In that case, it shows your site title plus the title of the post on that page.

The Main Index template

The Main Index template drags your blog posts out of the MySQL database and inserts them into your site. This template is to your blog what the dance floor is to a nightclub — where all the action happens.

The filename of the Main Index template is index.php. In the default Twenty Fifteen theme, you can find it in the /wp-content/themes/twentyfifteen/ folder.

The first template tag in the Main Index template calls in the Header template, meaning that it pulls the information from the Header template into the Main Index template, as follows:

<?php get_header(); ?>

Your theme can work without calling in the Header template, but it’ll be missing several essential pieces — the CSS and the blog name and tagline, for starters. Without the call to the Header template, your blog resembles the image shown in Figure 9-5.

The Main Index template in the default theme, Twenty Fifteen, calls in two other files in a similar fashion:

• get_template_part( 'content', 'get_post_format' );: This function calls in the template file named content.php as well as prepares the theme to accept special templates for a feature called Post Formats, which I cover in Chapter 12.
• get_footer();: This function calls in the template file named footer.php.

Each of these two functions and template files is covered in upcoming sections of this chapter.

Earlier in this chapter, in the “Connecting templates” section, I explain the concept of calling in a template file using a function or template tag. That is exactly what the Main Index template does with the four functions for the Header, Loop, Sidebar, and Footer templates explained in this section.

The Sidebar template

The filename of the default Sidebar template is sidebar.php. Typically, the sidebar is displayed on the right or left side of your WordPress template. In the default Twenty Fifteen theme, the sidebar is displayed on the right side of the template, by default (refer to Figure 9-3).

The Sidebar template is called into the Header template, which, as mentioned previously, is called into the Main Index template. The Sidebar template gets called in using this template tag (as seen in header.php in the Twenty Fifteen theme):

<?php get_sidebar(): ?>

This code calls the Sidebar template and all the information it contains into your blog page. Chapter 12 addresses some additional ways you can call in the Sidebar template, including having multiple Sidebar templates and using an include statement to pull them into the Main Index template.

In the “Using Tags with Parameters for Sidebars” section later in this chapter, you find information on template tags to use in the sidebar to display the usual sidebar elements, such as a list of the most recent posts or a list of categories.

The Footer template

The filename of the Footer template is footer.php. Usually, the footer sits at the bottom of the page (refer to Figure 9-3) and contains brief information about the site, such as copyright statements, credits to the theme designer or hosting company, or even a list of links to other pages within the site.

The default Twenty Fifteen theme shows a statement that says “Proudly powered by WordPress.” You can use the footer to include all sorts of information about your site, however; you don’t have to restrict it to small bits of information. In this chapter, I cover the typical footer that you see in the default Twenty Fifteen theme.

Similarly to the Header and Sidebar templates, the Footer template is called into the Main Index template through this bit of code:

<?php get_footer(); ?>

You can write calls for the Sidebar and Footer templates that are written as part of a larger call:

<?php

get_sidebar();

get_footer();

?>

It is possible, and common, to wrap two template tags in one PHP function like that, if they appear directly after one another. The examples I have given in this chapter separate them out into single functions to make sure you’re clear on what the actual function is.

This code calls the Footer and all the information it contains into your website page.

Other templates

Other templates are in the default Twenty Fifteen theme, and I don’t cover all of them in depth in this chapter, but having at least a basic understanding of them is a good idea. The ones I list in this section give you that good, solid kick in the pants you need to get started with understanding WordPress templates. When you have that task licked, you can move on to learning the rest.

These other (optional) templates include

• Comments template (comments.php): The Comments template is required if you plan to host comments on your blog; it provides all the template tags you need to display those comments. The template tag used to call the comments into the template is <?php comments_template(); ?>.
• Single Post template (single.php): When your visitors click the title or permalink of a post you’ve published to your blog, they’re taken to that post’s individual page. There, they can read the entire post, and if you have comments enabled, they see the comments form and can leave comments.
• Page template (page.php): You can use a Page template for static pages in your WordPress site.
• Search Results (search.php): You can use this template to create a custom display of search results on your site. When someone uses the search feature to search your site for specific keywords, this template formats the return of those results.
• 404 template (404.php): Use this template to create a custom 404 page, which is the page visitors get when the browser can’t find the page requested and returns that ugly 404 Page Cannot Be Found error.

The templates in the preceding list are optional. If these templates don’t exist in your WordPress themes folder, nothing breaks. The Main Index template handles the default display of these items (the single post page, the search results page, and so on). The only exception is the Comments template. If you want to display comments on your site, you must have that template included in your theme.

Connecting the templates

WordPress has built-in functions to include the main template files, such as header.php, sidebar.php, and footer.php, in other templates. An include function is a custom PHP function built in to WordPress, allowing you to retrieve the content of another template file and display it along with the content of another template file. Table 9-2 shows the templates and the functions to include them.

If you want to include a file that doesn’t have a built-in include function, you need a different piece of code. For example, if you want to add a unique sidebar (different from the default sidebar.php file within your existing theme) to a certain page template, name the sidebar file sidebar-page.php. To include that in another template, use the following code:

<?php get_template_part(‘sidebar’, ‘page’); ?>

In this statement, the get_template_part(‘sidebar’, ‘page’); function looks through the main theme folder for the sidebar-page.php file and displays the sidebar. The beautiful part about the get template part() template tag is that WordPress looks for the sidebar-page.php template first, but if it doesn’t find it, it defaults to using the sidebar.php template.

In this section, you put together the guts of a basic Main Index template by using the information on templates and tags provided so far in this chapter. There seem to be endless lines of code when you view the index.php template file in the Twenty Fifteen theme, so I’ve simplified it for you with the following steps. These steps should give you a basic understanding of the WordPress Loop and common template tags and functions that you can use to create your own.

You create a new WordPress theme using some of the basic WordPress templates. The first steps in pulling everything together are as follows:

1. Connect to your web server via FTP, click the wp-content folder, and then click the themes folder.

   This folder contains the themes that are currently installed in your WordPress blog. (See Chapter 3 for more information on FTP.)

2. Create a new folder and call it mytheme.

   In most FTP programs, you can right-click and choose New Folder. (If you aren’t sure how to create a folder, refer to your FTP program’s help files.)

3. In your favored text editor (such as Notepad for the PC or TextEdit for the Mac), create and save the following files with the lines of code I’ve provided for each:
   • Header template: Create the file with the following lines of code and then save with the filename header.php:

     <!DOCTYPE html>

     <html <?php language_attributes(); ?> class="no-js">

     <head>

     <meta charset="<?php bloginfo( ‘charset’ ); ?>">

     <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" />

     <?php wp_head(); ?>

     </head>

     <body <?php body_class() ?>>

     <header class="masthead">

     <h1><a href="<?php bloginfo( ‘url’ ); ?>"><?php bloginfo( ‘name’ ); ?></a></h1>

     <h2><?php bloginfo( ‘description’ ); ?></h2>

     </header>

     <div id="main">

   • Theme Functions: Create the file with the following lines of code and then save it using the filename functions.php:

     <?php

     add_theme_support( ‘title-tag’ );

     if ( function_exists( ‘register_sidebar’ ) ) register_sidebar( array( ‘name’=>‘Sidebar’,

     ));

     ?>

     The Theme Functions file registers the widget area for your site so that you’re able to add widgets to your sidebar using the WordPress widgets available on the Widget page in the Dashboard.

   • Sidebar template: Create the file with the following lines of code and then save it using the filename sidebar.php:

     <aside class="sidebar">

     <ul>

     <?php if ( !function_exists( ‘dynamic_sidebar ‘) || !dynamic_sidebar( ‘Sidebar’ ) ) : ?>

     <?php endif; ?>

     </ul>

     </aside>

     The code here tells WordPress where you would like the WordPress widgets to display in your theme; in this case, widgets are displayed in the sidebar of your site.

   • Footer template: Create the file with the following lines of code and then save with the filename footer.php:

     <footer>

     <p>&copy; Copyright <a href="<?php bloginfo( ‘url’ ); ?>"><?php bloginfo( ‘name’ ); ?></a>. All Rights Reserved</p>

     </footer>

     <?php wp_footer(); ?>

     </body>

     </html>

   • Stylesheet: Create the file with the following lines of code and then save it with the filename style.css (more CSS is covered in Chapter 10 — this example gives you just some very basic styling to create your sample theme):

     /*

     Theme Name: My Theme

     Description: Basic Theme from WordPress For Dummies example

     Author: Lisa Sabin-Wilson

     Author URI: http://lisasabin-wilson.com

     */

     body {

     font-family: verdana, arial, helvetica, sans-serif;

     font-size: 16px;

     color: #555;

     background: #ffffff;

     }

     header.masthead {

     width: 950px;

     margin: 0 auto;

     background: black;

     color: white;

     padding: 5px;

     text-align:center;

     }

     header.masthead h1 a {

     color: white;

     font-size: 28px;

     font-family: Georgia;

     text-decoration: none;

     }

     header.masthead h2 {

     font-size: 16px;

     font-family: Georgia;

     color: #eee;

     }

     header.masthead nav {

     background: #ffffff;

     text-align: left;

     height: 25px;

     padding: 4px;

     }

     header.masthead nav ul {

     list-style:none;

     margin:0;

     }

     #main {

     width: 950px;

     margin: 0 auto;

     padding: 20px ;

     }

     #main section {

     width: 500px;

     float:left;

     }

     #main .hentry {

     margin: 10px 0;

     }

     aside.sidebar {

     width: 290px;

     margin: 0 15px;

     float:right;

     }

     aside.sidebar ul {

     list-style:none;

     }

     footer {

     clear:both;

     width: 960px;

     height: 50px;

     background: black;

     color: white;

     margin: 0 auto;

     }

     footer p {

     text-align:center;

     padding: 15px 0;

     }

     footer a {

     color:white;

     }

Using the tags provided in Table 9-3, along with the information on The Loop and the calls to the Header, Sidebar, and Footer templates provided in earlier sections, you can follow the next steps for a bare-bones example of what the Main Index template looks like when you put the tags together.

When typing templates, use a text editor such as Notepad or TextEdit. Using a word-processing program such as Microsoft Word opens a whole slew of problems in your code. Word-processing programs insert hidden characters and format quotation marks in a way that WordPress can’t read.

Now that you have the basic theme foundation, the last template file you need to create is the Main Index template. To create a Main Index template to work with the other templates in your WordPress theme, open a new window in a text editor and then go through the following steps. (Type the text in each of these steps on its own line. Press the Enter key after typing each line so that each tag starts on a new line.)

1. Type <?php get_header(); ?>.

   This template tag pulls the information in the Header template of your WordPress theme.

2. Type <section>.

   This is HTML5 markup that tells the browser that this is a grouping of content (in this case, blog posts).

3. Type <?php if (have_posts()) : ?>.

   This template tag is an if statement that asks, “Does this blog have posts?” If the answer is yes, it grabs the post content information from your MySQL database and displays the posts in your blog.

4. Type <?php while (have_posts()) : the_post(); ?>.

   This template tag starts The Loop.

5. Type <article <?php post_class() ?> id="post-<?php the_ID(); ?>">.

   This is HTML5 markup that tells the browser that this is the start of a new, single article, along with the post_class CSS designation (covered in Chapter 12).

6. Type <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>.

   This tag tells your blog to display the title of a post that’s clickable (linked) to the URL of the post, surrounded by HTML Header tags.

7. Type Posted on <?php the_date(); ?> at <?php the_time(); ?>.

   This template tag displays the date and time when the post was made. With these template tags, the date and time format are determined by the format you set in the Dashboard.

8. Type Posted in <?php the_category( ‘,’ ); ?>.

   This template tag displays a comma-separated list of the categories to which you’ve assigned the post — Posted in: category 1, category 2, for example.

9. Type <?php the_content( ‘Read More..’ ); ?>.

   This template tag displays the actual content of the blog post. The ‘Read More..’ portion of this tag tells WordPress to display the words Read More, which are clickable (hyperlinked) to the post’s permalink, where the reader can read the rest of the post in its entirety. This tag applies when you’re displaying a post excerpt, as determined by the actual post configuration in the Dashboard.

10. Type Posted by: <?php the_author(); ?>.

    This template tag displays the author of the post in this manner: Posted by: Lisa Sabin-Wilson.

11. Type </article>.

    This is HTML5 markup that tells the browser that the article has ended.

12. Type <?php endwhile; ?>.

    This template tag ends The Loop and tells WordPress to stop displaying blog posts here. WordPress knows exactly how many times The Loop needs to work, based on the setting in the WordPress Dashboard. That’s exactly how many times WordPress will execute The Loop.

13. Type <?php next_posts_link(‘&laquo; Previous Entries’); ?>.

    This template tag displays a clickable link to the previous page of blog entries, if any.

14. Type <?php previous posts link(‘&raquo; Next Entries’); ?>.

    This template tag displays a clickable link to the next page of blog entries, if any.

15. Type <?php else : ?>.

    This template tag refers to the if question asked in Step 3. If the answer to that question is no, this step provides the else statement — IF this blog has posts, THEN list them here (Steps 3 and 4), or ELSE display the following message.

16. Type Not Found. Sorry, but you are looking for something that isn't here.

    This is the message followed by the template tag displayed after the else statement from Step 15. You can reword this statement to have it say whatever you want.

17. Type <?php endif; ?>.

    This template tag ends the if statement from Step 3.

18. Type </section>.

    This is HTML5 markup that closes the <section> tag opened in Step 2, and tells the browser that this grouping of content has ended.

19. Type <?php get_sidebar(); ?>.

    This template tag calls in the Sidebar template and pulls that information into the Main Index template.

20. Type </div>.

    This is HTML markup closing the <div id="main"> that was opened in the header.php file.

21. Type <?php get_footer(); ?>.

    This template tag calls in the Footer template and pulls that information into the Main Index template. Note: The code in the footer.php template ends the <body> and <html> tags that were started in the Header template (header.php).

    When you’re done, the display of the Main Index template code looks like this:

    <?php get_header(); ?>

    <section>

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <article <?php post_class() ?> id="post-<?php the_ID(); ?>">

          <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

          Posted on: <?php the_date(); ?> at <?php the_time(); ?>

          Posted in: <?php the_category(’,’); ?>

          <?php the_content(‘Read More..’); ?>

          Posted by: <?php the_author(); ?>

    </article>

    <?php endwhile; ?>

    <?php next_posts_link( ‘&laquo; Previous Entries’ ) ?>

    <?php previous_posts_link( ‘Next Entries &raquo;’ ) ?>

    <?php else : ?>

    <p>Not Found

    Sorry, but you are looking for something that isn't here.</p>

    <?php endif; ?>

    </section>

    <?php get_sidebar(); ?>

    </div>

    <?php get_footer(); ?>

22. Save this file as index.php and upload it to the mythemes folder.

    In Notepad or TextEdit, you can save it by choosing File  Save As. Type the name of the file in the File Name text box and click Save.

23. Activate the theme in the WordPress Dashboard and view your blog to see your handiwork in action!

My Main Index template code has one template tag that I explain in Chapter 12; that template tag is <article <?php post_class() ?> id="post-<?php the_ID(); ?>">. This tag helps you create some interesting styles in your template using CSS, so check out Chapter 12 to find out all about it!

This very simple and basic Main Index template that you just built does not have the standard HTML markup in it, so you will find that the visual display of your blog differs from the default Twenty Fifteen theme. This example was used to give you the bare-bones basics of the Main Index template and The Loop in action. Chapter 10 goes into details about using HTML and CSS to create nice styling and formatting for your posts and pages.

If you’re having a hard time typing out the code provided, I have made this sample theme available for download on my website. The zip file contains the files discussed in this chapter so you can compare your efforts with mine, electronically. You can download the theme zip file here: http://lisasabin-wilson.com/wpfd/my-theme.zip.

Using additional stylesheets

Often a theme uses multiple stylesheets for browser compatibility or consistent organization. If you use multiple stylesheets, the process for including them in the template is the same as with any other stylesheet.

To add a new stylesheet, create a directory in the root theme folder called css. Next, create a new file called mystyle.css within the css folder. To include the file, you must edit the header.php file. The following example shows the code you need to include in the new CSS file:

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’);

?>/css/mystyle.css" type="text/css" media="screen" />

Additional stylesheets come in handy when working with a concept called Parent/Child themes, which is the practice of creating a child theme that depends upon a separate parent theme for features and functions. I write more about Parent/Child themes, as well as provide you with additional information on HTML and CSS, in Chapter 11.

The calendar

The calendar tag displays a calendar that highlights each day of the week on which you’ve posted a blog. Those days are also hyperlinked to the original blog post. Here’s the tag to use to display the calendar:

<?php get_calendar(); ?>

The calendar tag has only one parameter, and it’s Boolean. Set this parameter to true and it displays the day of the week with one letter (Friday = F, for example). Set this parameter to false and it displays the day of the week as a three-letter abbreviation (Friday = Fri., for example). Here are examples of the template tag used to display the calendar on your WordPress blog:

<?php get_calendar( true ); ?>

<?php get_calendar( false ); ?>

List pages

The <?php wp_list_pages(); ?> tag displays a list of the static pages you can create on your WordPress site (such as About Me or Contact pages). Displaying a link to the static pages makes them available so that readers can click the links and read the content you’ve provided.

WordPress has a handy navigation menu–building tool that I cover in Chapter 10. It allows you to build different custom navigation menus. If you like the navigation tool, you may never need to use the wp_list_pages(); template tag. Still, I’m including it here because you may want to use it if you want to have complete control over how the list of pages appears on your website.

The <list> tag parameters use the string style. (Table 9-5 lists the most common parameters used for the wp_list_pages template tag.)

An alternative to using the wp_list_pages() template tag to create a navigation system is to use the built-in feature in WordPress called Menus, which enables you to build custom menus that aren’t completely dependent upon your WordPress pages but that can include links to posts, categories, and custom links that you define. Chapter 10 contains information about the Menus feature, along with the wp_nav_menu() template tag that you use to display menus.

Page lists are displayed in an unordered list (you may know it by the term bulleted list). Whichever term you use, it’s a list with a bullet point in front of every page link.

The following tag and query string displays a list of pages without the text heading "Pages". In other words, it displays no title at the top of the page’s link list:

<?php wp_list_pages( ‘title_li=’ ); ?>

The next tag and query string displays the list of pages sorted by the date when they were created; the date is also displayed along with the page name:

<?php wp_list_pages( ‘sort_column=post_date&show_date=‘created’ ); ?>

Take a look at the way query-string parameters are written:

‘parameter1=value&parameter2=value&parameter3=value’

The entire string is surrounded by single quotation marks, and no white space is within the query string. Each parameter is joined to its value by the = character. When you use multiple parameters/values, you separate them with the & character. You can think of the string like this: parameter1=valueANDparameter2=valueANDparameter3=value. Keep this convention in mind for the remaining template tags and parameters in this chapter.

Post archives

The <?php wp_get_archives(); ?> template tag displays the blog post archives in a number of ways, using the parameters and values shown in Table 9-6. Values that appear in bold are the default values set by WordPress. Here are just a few examples of what you can produce with this template tag:

• Display the titles of the last 15 posts you’ve made to your site.
• Display the titles of the posts you’ve made in the past ten days.
• Display a monthly list of archives.

Here are a couple of examples of tags used to display blog-post archives.

This tag displays a linked list of monthly archives (for example, November 2015, December 2015, and so on).

<?php wp_get_archives( ‘type=monthly’ ); ?>

This next tag displays a linked list of the 15 most recent blog posts:

<?php wp_get_archives( ‘type=postbypost&limit=15’ ); ?>

Categories

WordPress lets you create categories and assign posts to a specific category (or multiple categories). Categories provide an organized navigation system that helps you and your readers find posts you’ve made on certain topics.

The <?php wp_list_categories(); ?> template tag lets you display a list of your categories by using the available parameters and values. (Table 9-7 shows some of the most popular parameters.) Each category is linked to the appropriate category page that lists all the posts you’ve assigned to it. The values that appear in bold are the default values set by WordPress.

Here are a couple of examples of tags used to display a list of your categories.

This example, with its parameters, displays a list of categories sorted by name without showing the number of posts made in each category; the example also displays the RSS feed for each category title:

<?php wp_list_categories( ‘orderby=name&show_count=0&feed=RSS’ ); ?>

This example, with its parameters, displays a list of categories sorted by name with the post count showing and shows the subcategories of every parent category:

<?php wp_list_categories( ‘orderby=name&show_count=1&hierarchical=1’ ); ‘>

Getting widgetized

About 99.99 percent of the WordPress themes available today are coded with widgetized sidebars — which means you can use the widgets within WordPress to populate your sidebar area with content, navigation menus, and lists.

With widgets in place, you generally have no reason to mess around with the code in the sidebar.php template file because most of the content you want to add into your sidebar can be added through the use of widgets.

In a WordPress theme, the Theme Functions template (functions.php) and the Sidebar template (sidebar.php) create the functionality and the possibility for widgets to exist within your theme. You’re not limited to where you place and use widgets, by and large. I am using the Sidebar template (sidebar.php) in this example.

First, you have to define the widgets in your theme. This means that you need to alert WordPress to the fact that this theme can handle widgets — which is known as registering a widget with the WordPress software. To register a widget, add the register_sidebar function to the Theme Functions template (functions.php). In the functions.php file in the Twenty Fifteen theme, the code for registering a widget looks like this:

register_sidebar( array(

‘name’ => __( ‘Widget Area’, ‘twentyfifteen' ),

‘id’ => ‘sidebar-1’,

‘description’ => __( ‘Main sidebar that appears on the left.’, ‘twentyfifteen’),

‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,

‘after_widget’ => ‘</aside>’,

‘before_title’ => ‘<h1 class="widget-title">’,

‘after_title’ => ‘</h1>’,

) );

Within that code, you see seven different arrays. An array is a set of values that tells WordPress how you would like your widgets handled and displayed:

• name: This name is unique to the widget and appears on the Widgets page in the Dashboard. It is helpful if you register several different widgetized areas on your site.
• id: This is the unique ID given to the widget.
• description (optional): This is a text description of the widget. The text that gets placed here displays on the Widgets page in the Dashboard.
• before_widget: This is the HTML markup that gets inserted directly before the widget. It is helpful for CSS styling purposes.
• after_widget: This is the HTML markup that gets inserted directly after the widget.
• before_title: This is the HTML markup that gets inserted directly before the widget title.
• after_title: This is the HTML markup that gets inserted directly after the widget title.

With that code in your functions.php file, WordPress now recognizes that you’ve registered a widget called Widget Area for your theme and makes the widget area available for you to drag and drop widgets onto the Widgets page in the Dashboard. All that’s left to do now is to call that widget into your sidebar.php file. By doing so, you allow the widgets to display on your site. Follow these steps to call widgets to your site (these steps assume that the widget code isn’t already in the Sidebar template):

1. Click the Editor link below the Appearance menu.

   The Edit Themes page opens.

2. Click the Sidebar (sidebar.php ) template.

   The Sidebar template opens in the text box on the left side of the page.

3. Type the following code in the Sidebar (sidebar.php ) template:

   <?php if ( ! dynamic_sidebar( ‘Primary Widget Area’ ) ) : ?>

   <?php endif; ?>

   The parameter within the dynamic_sidebar template tag corresponds to the name that you provided in the widget array called name earlier in this section. It must be the same; otherwise, it will not display on your website.

4. Click the Update File button.

   The changes you’ve made to the Sidebar (sidebar.php) template file are now saved.

You can register an unlimited number of widgets for your theme. This flexibility allows you to create several different widgetized areas and widget features in different areas of your site. Chapter 12 goes into more detail about using different Sidebar templates to create different widgetized areas and features on your site.