In 2005, WordPress became modular separating the design and architecture from the core programming code.

Today, a WordPress Theme contains files called template files that hold the architecture of the site and template tags, code that initiates actions within the site and data from the database. The design is applied through a stylesheet, holding the instructions for the colors, images, and look and feel of the entire site.

This tutorial covers the basics of the structure of a WordPress Theme and standard customization options.

The Structure of a WordPress Site

Like all websites today, a WordPress site contains a background area, header, sidebar(s), content area, and footer.

The background area is considered the canvas that the site’s structural and design elements rest. It is usually a solid color, pattern, texture, or a design that does not overwhelm the rest of the content and design elements.

The header area content is set from within the WordPress Administration Panels through the Settings > General for the site title and site tagline.

The header art image is set from within the Appearance > Custom Header Image. WordPress now permits a wide range of images and image sizes to be used as the custom header image, and permits some level of cropping and positioning.

The sidebar(s) contain navigation, information, and design elements that complement the site’s purpose and content. In WordPress, this information is held in WordPress Widgets, modular content elements that can be moved around in the various sidebars, footers, and occasionally the header area. These are accessed and modified in Appearance > Widgets.

The footer is located at the bottom of the site. It usually features the name of the WordPress Theme and its author to give them credit, and the words “Powered By WordPress” with a link to WordPress or WordPress.com. It may also feature footer Widgets accessed through Appearance > Widgets > Footer.

The content area holds the content of the page depending upon the request of the user to view the front page, a Page, a single post, a search, categories, tags, author posts, archives, and other multiple post pageviews.

The Pageviews of WordPress

Pageviews are the different views of a web page based upon the content requested by the user.

Here is a list of the basic pageviews found on WordPress.

• Front Page: This is the front page of the site. Posts on the front page of the site are displayed in reverse chronology. It may be styled the same or differently from the rest of the site based upon the WordPress Theme’s specifications.
• Single Post Pageview: This is the view of a single post on the site. It may look the same or different from the rest of the pageviews.
• Single Page Pageview: This is the view of a single Page, the pseudo-static content of WordPress. It may look the same or different from the rest of the pageviews.
• Multi-post Pageviews: The following are known as multi-post pageviews or multiple post pageviews. The pageviews feature links to multiple posts displayed in reverse chronological order. Some WordPress Themes feature the option to add descriptive text to various multi-post pageviews. The posts may be featured by post title only, post title and excerpt of the post, or the whole post dependent upon the WordPress Theme and administrator specifications.
  • Category Pageview: This is the view of the posts within a specific category. It generally features more than one page with older and newer entries navigation at the bottom of the page. If the Theme permits it, the category pageview will display the description of the category set in the Category Panel.
  • Tag Pageview: This is the view of the posts within a specific tag, a descriptive keyword representing the index words of the site. It generally features more than one page with older and newer entries navigation at the bottom of the page.
  • Author Pageview: This is the view of the posts by a specific author. It generally features more than one page with older and newer entries navigation at the bottom of the page. If there is only one author on a site, there may not be a visible link to the author within the WordPress Theme. Some Themes are designed to show an author byline with a link to the author pageviews when a second author is added to the site. If the Theme permits it, the author pageview will display the description of the author set in the Profile Panel for that author.
  • Search Pageview: This is the view of posts generated by a search on the site. Most WordPress sites use the default search built into WordPress. Some sites integrate Google or another search engine into their site to generate search results.
  • Archive Pageview: This is the view of the posts by a specific date, typically by month though it can be displayed by day, week, month, or year.

Content in WordPress

There are four core ways WordPress manages content: posts, Pages, categories, and tags.

Pages are timeless content, and posts consist of timely content and are organized into category and tag groupings.

Pages

Pages with a capital P are the pseudo-static content web pages in WordPress. They tend to hold timeless content such as About, Contact, Events, Policies, Resources, Links, etc.

Pages are featured in key navigation menus by default on most WordPress Themes.

For more information, see WordPress Pages: Exploring the Pseudo-Static Pages of WordPress, Pages on the WordPress Codex, and Pages verses Posts on WordPress.com Support.

Posts

Posts are for the majority of your content. Posts feature timely content such as announcements, features, articles, photographs, cartoons, and general information.

Posts are grouped by categories and tags, as explained below.

Posts are featured on the front page and multi-post pageviews by default in WordPress. A post page is called a single post pageview and features a post meta data section and comments, if comments are enabled.

Excerpts

Dependent upon the WordPress Theme specifics or user control, posts featured on multiple post pageviews are displayed in full, by post title, or with the post title and an excerpt, typically the first 200 words of the blog post unless the author used the explicit excerpt feature (go to Screen Options and select the Excerpt feature to display it on the post panel).

The front pageview typically features full length posts unless the user has used an explicit excerpt or the More feature.

The More feature is a button on the post toolbar which places a shortcode comment within the post at the cursor position. This code instructs WordPress to stop the excerpt at that point.

Post Meta Data

The post meta data section of a blog post features the time and publishing date of the post, the categories and tags, and the author name in a link to their author archives.

The post meta data may be found under the post title with as little information as the author’s byline, and/or at the bottom of the post before the comments.

The post meta data section is determined by the WordPress Theme and may be different from Theme to Theme.

For more information, see Designing Your Post Meta Data Section on the WordPress Codex.

Comments

Comments are featured only on posts, below the post. By default, they are ordered descending in chronological order.

Comments generally feature the name of the commenter, their website if supplied, the date and time of the comment, and the comment itself. Most modern WordPress Theme support Gravatars which will automatically display the Gravatar of the user if they have registered that email with Gravatar.

When entering information in the comment form, users will also add their email address which is required. This information is not shown by default for the user’s privacy.

Comments may include some HTML tags. Some WordPress Themes feature a list of the allowed HTML tags.

Comments on modern WordPress Themes are displayed using threading, displaying replies to specific comments in relationship to and indented below that comment to assist with reading the chronological path and off topic discussions that may evolve on posts.

Categories

Categories are a site’s table of contents. Most sites should feature 5-12 categories at most, keeping the navigation to core content areas clean and manageable.

Categories can be set from within the Administration Panels on the Post Edit Panel or from within the Category Panel.

Category lists are features differently on each WordPress Theme. They are usually shown by default or added manually with WordPress Widgets. They may also be added to the main navigation through Custom Menus.

Categories for a specific post are always featured in the post meta data section for that post.

For more information, see Categories versus Tags – What’s the Difference and Which One?

Tags

Tags are the index words of the site. They are the keywords someone might use to search for that post or found within the post, just as index words are used in a book.

Tags are added through the WordPress Administration Panels on the Post Edit Panel or from within the Tags Panel.

Tags are featured in the post meta data section for that post, and in WordPress Widgets such as the Tag Cloud Widget.

For more information, see Tags and Tagging in WordPress.

WordPress Widgets and Design Elements

WordPress Widgets are modular design and navigation elements added to the sidebar, footer, and header areas of a WordPress Theme. The number of Widgets and their placement within a Theme is based upon the specifications of that WordPress Theme. Some allow Widgets only in the sidebar. Others allow them in the other areas or restrict the number in each area.

Each Widget features a title area and options to customize that Widget if applicable. The title area is set by default if you do not supply a title for the Widget.

Usually you can use a Widget more than once in the sidebar, footer, or elsewhere, though some WordPress Themes may restrict that.

WordPress Support lists the Widgets available in Widgets & Sidebars. The following is a general description of the most frequently used WordPress Widgets.

• Pages Widget: The Pages Widget lists links to all the Pages on your site. It can be a simple navigation list or a drop down menu. The drop down menu is not recommended as it makes the visitor work harder to find key navigation and information on your site.
• Search Widget: The Search Widget adds a search form where you wish it to appear. Some WordPress Themes feature a search form in a fixed place within the Theme such as in the header. This Widget allows you to add another one elsewhere, such as in the footer or near the bottom of your sidebar to help users search easily from anywhere on your site.
• Categories Widget: This Widget features a link list of the categories on the site. The user may choose from a simple list or a drop down menu. The drop down menu is strongly discouraged as it makes for extra work for the user to click it to see your categories. It also hides the list, masking key information and navigation points for your site’s content.
• Text Widget: The Text Widget is one of the most popular and flexible of the Widgets. You may enter text, Basic HTML, images, and many other things within it. For more details, see WordPress Tips: Exploring the WordPress Text Widget.
• Calendar Widget: The Calendar Widget displays a calendar featuring dates linked to the posts you’ve written on that date. It is not an event or appointment calendar. Few people use this any more as most visitors rarely read a site chronologically. It also serves as a reminder of how often you post, or not.
• Recent Posts Widget: This Widget displays your most recent published posts.
• Top Posts & Pages Widget: This Widget features links to your most popular posts and Pages.
• Recent Comments Widget: This Widget displays the most recent comments on your site. If you have a highly interactive site, this is recommended. If you don’t, use the real estate for something else.
• Tag Cloud Widget: The Tag Cloud Widget displays your tag keywords in a tag cloud or heat map. Tags with the most posts are featured in a larger font size and smaller ones have the least posts. By default, WordPress.com’s tag cloud shows up to 45 of your most popular tags.
• Twitter Widget: This Widget requires a link to a Twitter account. It will display the latest tweets.
• Archives Widget: This Widget is usually enabled by default. It features the months and years that you have been publishing. Each link takes you to the Archive Pageview for that date to see all the posts published that month. This is ideal for personal blogs that are chronologically focused, but serves little purpose for most sites as people don’t know nor care when something was published, they will search by keyword.
• Feed Widgets: There are two feed Widgets, RSS Widget and RSS Links Widget. The RSS Widget displays posts from any feed source. The RSS Links Widget displays the feed options on your site as images and/or text. These Widgets are called RSS, a type of feed. Any feed type will work with these.
• Follow Blog Widget: The Follow Blog Widget adds a subscription option to your site to allow visitors to subscribe to your site for email notifications. They will receive new posts by email.
• Milestone Widget: This Widget allows you to set a goal and provides an automatic count down to the deadline date.
• Image Widget: This image allows you to easily add an image or photograph to your site’s sidebar or footer.
• Meta Widget: The Meta Widget features a list of links to key WordPress sites and a login/log out link. This is an excellent feature to add if your site features multiple contributors. See How to Log Into WordPress.

Custom Menus

The menu navigation area on a WordPress site features links to key areas and information for your site.

By default, it features a link list of Pages.

If the WordPress Theme permits, it can be customized to feature links to anything and anywhere.

To create a custom menu in WordPress:

1. Go to Appearance > Menus.
2. In the form titled Menu Name, type in a unique name for your menu.
3. Click Create Menu.
4. On the left side of the panel, choose which Pages, Categories, Tags, Post Formats, and navigation options.
   • Note: If you do not see all of these options listed, go to Screen Options in the upper right corner of the panel and select these features in Show on screen.
   • If you wish to add a specific link to an internal or external web page or site, use the Custom Links option.
   • As you add each menu option, they will appear in the right side form.
     • You may click and draft these to different positions. Drag an item to the left or right to create sub-menu items.
     • You may also rename the labels.
     • You also remove the menu item.
5. When you have completed the menu, click Save.
6. In the Theme Locations section of the panel, choose the placement of the menu. Some Themes only permit one menu called the Primary Menu.
7. Click Save to complete the process.
8. Go to the front page view of your site to view the results.

If your Theme features a custom menu option in the Widgets, create another Custom Menu with a different name.

1. Go to Appearance > Widgets.
2. Select the Custom Menu Widget and drag it to a place in the sidebar or footer.
3. Go to the front page view of your site to view the results.

How to Log In and Edit Your WordPress Site

The video and tutorial, How to Log Into WordPress, explains the specifics of how to log into your WordPress site from various entry points.

All WordPress Themes also offer an Edit link visible only to logged in users such as administrators, editors, or authors.

Click this link on any post or Page to quickly access it for editing.

Permalinks: The Addresses for Your WordPress Site

A permalink is a “permanent” link to a web page.

In the early days of web publishing and blogging, there was confusion over how to link to a specific post. People would link to the page upon which they found the post, but it wasn’t the actual post but a multiple post pageview featuring many posts. The link would be to page 4 of the list of posts. As the blogger would add more posts, that post would shift to page 5, 6, and so on, and the link would no longer work as the post wasn’t there.

Permalinks were featured on multiple post pageviews near the post title or bottom of the post as a reminder that “this is the link to the post you want.”

Links used to be very ugly: example.com/category/dishes/8094/post-title-21234.html or worse.

Today, WordPress uses Pretty Permalinks to make the addresses easier to read and use.

A typical pretty permalink in WordPress is:

https://lorelleteaches.wordpress.com/2012/09/10/how-to-log-into-wordpress/

It features the domain name of the site, the year, month, date, and the post title.

Permalinks on self-hosted versions of WordPress may be set up to display the year, month, and post title, or any combination there of. It can also be set to display keywords and numbers, if the user prefers.

Permalinks on WordPress.com sites cannot be modified.

The WordPress Loop – The Engine That Makes This All Work

A WordPress Theme is made up of template files holding template tags and conditional tags and queries. It is extended through the use of WordPress Plugins.

Customization to a WordPress Theme is made through the use of a Child Theme, a Theme that overwrites the styles of its “parent” Theme to allow easy updating and upgrading of the main Theme while preserving the user’s customization.

The site design and customization is handled by the stylesheet within the WordPress Theme.

All of this is driven by the WordPress Loop, the engine that makes all of the bits and pieces of WordPress work.

The WordPress Loop, in its most simple form, looks like this with a WordPress Theme’s template files:

<?php if (have_posts()) : 
   while (have_posts()) : 
       the_post(); 
       the_content(); 
   endwhile; endif; ?>

The WordPress Loop works in conjunction with WordPress Template tags to request data from the database and the Theme based upon the user requests. Think of these as if/then conditional statements.

Examples of these if/then statements include:

• If this is the front page, show the front page of the site featuring the most recently published posts in reverse chronological order.
• If this is the single post pageview, show the post.
• If this is a category pageview, show the title as “Archive for the XYZ Category” and display the posts within that category in reverse chronological order.
• If this is the author pageview, show the title as the name of the author, display their profile biography, and display their posts in reverse chronological order.
• If the page sought is not found, show the 404 Page Not Found Error.

The WordPress Loop looks like this in a simple form, generating any pageview on the site.

<header>
<?php get_header(); ?>
</header>
<body><div id=“content”>
<?php if (have_posts()) : 
   while (have_posts()) : 
       the_post(); 
       the_content(); 
   endwhile; endif; ?>
</div>
<div id=“sidebar”>
<?php get_sidebar(); ?>
</div>
<div id=“footer”>
<?php get_footer(); ?>
</div>
</body> 

The get_header, get_sidebar, and get_footer parts of the code are template tags. They are bits of WordPress programming code that instructs the Theme to get the header, sidebar, and footer template files and include them in the generation of the page.

The most basic WordPress Theme may feature a template file called index.php featuring the code above to generate every page on the site. A modern WordPress Theme features the index.php template file as well as the header, footer, and sidebar template files. A sophisticated WordPress Theme would include even more template files to generate the pageviews per the conditions set.

By default, WordPress automatically creates (generates) a pageview based upon the user’s request according to its Template Hierarchy programming.

According to this template file hierarchy, if a template file is requested and not found, WordPress automatically falls back to recognized defaults:

1. If category with an ID number of 42 is requested, WordPress looks for category-42.php.
2. If not found, it go to the category.php template file.
3. If not found, it goes to archive.php.
4. If not found, it goes to index.php to generate the page.

Conditional Tags in WordPress add even more conditions to how a page is displayed.

• If this is the front page, show the custom sidebar for the front page.
• If this is the category page, in the sidebar show a list of posts only found within that category.
• If this is the author page, in the sidebar show a list of posts by only that author.
• If this is a post in the Automobile category, display ads related to cars in the sidebar.

The customization of WordPress with conditional tags is infinite. It is up to you as designer and developer to customize WordPress any way you want.

To see the possible, look for the section on “Study the Twenty-Eleven Theme in WordPress” in What You Most Need to Know About WordPress. The default WordPress Themes that come with the basic installation of WordPress serve as examples of the possible, and are the basis upon which many WordPress Theme designers base their Themes.

For more information on the WordPress Loop and functions, see:

• Template tags
• WordPress Loop
• The WordPress Loop in Action
• Stepping Into Templates
• Stepping Into Template Tags
• Conditional Tags
• Finding Your CSS Styles in WordPress

More on WordPress Bits and Pieces

For more information on the parts and pieces of WordPress, check out:

• What You Most Need to Know About WordPress « Lorelle on WordPress
• What I needed to learn about WordPress
• WordPress Tips
• WordPress Cheat Sheets, Checklists, and Infographics
• WordPress Theme Resources
• WordPress Under the Hood