Using Templates in WordPress

WordPress doesn't require you to know how to write CSS, HTML, or PHP. We've said that before, and it's true. However, you need some knowledge of it if you want to create a website that looks exactly as you want it to. It's the only way to remove all the limitations you may face based on experience, and be able to create the site you want.

That said, this isn't a PHP or MySQL article. We're going to provide an overview of PHP and MySQL so you gain a basic understanding of both in regards to how they function with WordPress. However, PHP and MySQL are too large of topics to teach in a WordPress article, especially since in-depth knowledge of them is not required.

In this article, we'll learn about:

How PHP and MySQL work together

The basics of PHP

How to manage the MySQL database

The template files found in themes

CSS stylesheets

The Main Index and The Loop

How PHP and MySQL Work Together

Earlier in this article, we talked about your MySQL database. WordPress operates on a PHP/MySQL platform. Your content for your site is stored in your MySQL database, which is part of your hosting account.

When a visitor comes to your site to see your content, a request is sent to your server. It's received by the PHP, which them makes a call to your MySQL database to get the informaton requested. That information is presented to your visitor in their web browser. At this point in time, the content on your site becomes all of your posts, comments, and links. However, it also includes your theme since that is part of the content that will be presented to the visitor.

About PHP

You can identify a PHP file by its extension. The extension is .php, just as the HTML extension is .html, CSS is .css, and JavaScript is .js.

WordPress will not work without PHP. That's the bottom line. It's not something you can get around or avoid as you could if you were building an HTML site and didn't want to use CSS. You don't need CSS for HTML, but you need PHP for WordPress. However, you don't have to worry about if PHP is working on your website.

That said, let's learn a little about PHP. Just remember, the purpose of this article is not to turn you into a PHP expert or to teach you to be a database administrator. It's simply to show you how PHP and MySQL work together behind the scenes on your website, as well as to give you enough knowledge to further customize your website.

Learning about Template Tags

PHP is a scripting language that's used to create web pages, much like HTML or CSS. The difference is that PHP is used to retrieve information from a MySQL database. PHP and MySQL are partners in crime, so to speak. They go together. They work together.

The PHP script is enclosed in tags. These tags start and end PHP. A comparison to this is HTML where a HTML script starts with < > and ends with </>. Between the tags in PHP is the request that goes to the database that lets WordPress know what data (content) needs to be displayed in a visitor's web browser.

A template tag – or function – in PHP looks like this:

<?php get_info(); ?>

Look at the tag above again. We'll explain what it means.

This tag tells WordPress that we want to do three things.

1. The first part tells PHP to start. <?php

2. get_info(); means to get information from the database to be displayed in the browser.

3. ?> means to stop PHP.

get_info() is the tag function. It grabs the data that will be delivered to your site. What data will be grabbed depends on what tag function is between the two PHP commands.

Don't panic if this still sounds like gibberish to you. We're going to talk about it a lot more throughout this article.

Managing the Database

Don't be scared of the MySQL database. If you're not a database administrator by trade, it can seem like a scary thing to tackle. After all, it's fairly easy to build simple websites with a little HTML and CSS thrown in. But add a database to the equation and, all of the sudden, it seems like a programming nightmare best left to professionals. However, that's not the case.

The fact is that you don't have to deal with the database if you don't want. It's only when you're developing a theme, plug-in, or adding code to a WordPress project that you really need skills with MySQL. That doesn't mean you can't become a little more familiar with it, though, so you can gain an understanding of exactly how your site works behind the scenes. That familiarity is what we're going to give you.

When WordPress is installed on your server, eleven tables are added to your database that will store data from your website.

These tables are listed below.

wp_commentmeta stores all comments that are published on your site, as well as metadata such as a comment ID number.

wp_comments stores the body of comments that are published on your site, such as the comment content, the date, the status of the comment, etc.

wp_links stores information about your links. The name, URL, and description of links is stored in this table.

wp_options stores the option settings you choose for WordPress. This includes theme option settings.

wp_postmeta stores all posts or pages on your site, including metadata such as the unique post ID number.

wp_posts stores the body of any post or page, including post author, date, and time.

wp_terms stores the categories for the posts, as well as links and tags for your posts.

wp_term_relationships stores the relationship among posts, including tags and categories.

wp_term_taxonomy stores the taxonomy associated with the terms stored in wp_terms.

wp_usermeta stores metadata for every user who has an account on your site.

Interested in learning more? Why not take an online Creating WordPress Websites course?

wp_user stores a list of all users on your site, including user login and password.

You can view your database through your hosting account. The most common way is through phpMyAdmin.

Examining Template Files Found in a Theme

A WordPress theme is another name for a template. This is true. However, what must be understood is that a WordPress theme is a collection of WordPress templates that are made up of WordPress template tags.

That said:

A WordPress theme is actually a group of templates that are put together.

A WordPress template is one template file that contains WordPress template tags.

WordPress template tags are the glue that holds all the templates together and makes them into a theme.

Let's look at what we mean.

Connect to your web server. Look at the WordPress themes on your server that are located in the folder /wp-content/themes.

Find the /twentyfourteen theme folder, then open it.

You will see the files in the snapshot below.

Any theme in WordPress should have at least the following files:

style.css

header.php

index.php

sidebar.php

footer.php

The files shown in the snapshot above are template files. You can look at these files to see the template functions.

To look at them, log in to WordPress. Go to your dashboard, then Appearance>Editor.

To view or edit a template file, all you have to do is click the template name on the right side of the page. You'll see a list of all your template files there. You can also see all the template tags within a file.

Just remember that template files do not work by themselves. They need each other to function. A footer template file can't work without a header template file, etc. because they all become part of your theme. Template tags are used to pull them all together. The information goes into the Main Index.

The Templates in a WordPress Theme

Every theme must contain at least the following templates:

style.css – contains the formatting for your site, such as fonts, colors, etc.

header.php – contains the name of your site as well as the tagline.

index.php – contains your content.

sidebar.php – contains navigation, such as the blogroll and recent posts.

footer.php – this is the bottom of the page and contains copyright information, as well as information about the site.

Let's talk about each of these templates a little more in depth. If you want to create your own theme, you'll have to have an understanding of these templates before you even begin.

The CSS Stylesheet

Every theme has a style.css file. This is a stylesheet that sets formatting for your content, such as fonts, colors, sizes, graphics, icons, background colors, borders, etc. CSS IDs and classes are used to identify the styles to your website.

CSS IDs are used for elements that appear once on a page.

Classes can be used as many times as you need to use them.

For now, let's talk about the style.css file. At the beginning of the file, there will be a comment block, also known as a stylesheet header. This gives WordPress information about your theme. Comments don't appear on your website, but WordPress will use the stylesheet header to gather info about the theme.

Comments in CSS begin with a forward slash followed by a star (/*). The end with a star and a forward slash (*/).

Here's the stylesheet header for our Twenty Fourteen theme.

You can edit the comments. The changes will be reflected on the Themes page (Appearance>Themes).

Below the stylesheet header are the CSS styles that identify your formatting and style for the theme (as shown above).

The Main Index

There are two files that your theme MUST have. These two files are style.css and index.php. The index.php file is the first file loaded when a visitor comes to your site. The index.php file can be a file by itself or it can include other templates. Another name for the index.php file is the Main Index.

Here's how it works. When someone visits your site, the Main Index template gets your posts out of your database, then inserts them on your site. It's going to pull up the header template (<?php get_header() ; ?>) as well as other templates that are part of your theme. What the Main Index is doing is constructing your site so that the viewer only sees a complete site. Only you and WordPress know that it's a bunch of parts (templates) coming together using template tags.

Another job of the Main Index is to contain The Loop. The Loop is used to display posts and pages on your site. The PHP or HTML that you use for the loop will repeat for any posts and pages being displayed.

Naturally, The Loop has starting and ending points. Anything between those points displays posts or pages, including HTML, PHP, or CSS code.

In the example below, The Loop begins with while.

Anything that's between while and endwhile will repeat for each post that appears. The number of posts will be determined by your Settings in the WordPress dashboard.

What the code is doing is telling WordPress to get the posts from the database and display them on the site. The Loop is telling WordPress to go back and get each post.

If you site doesn't have posts to get, The Loop won't execute.

You'll see if (have_posts() ) : at the beginning of a Loop. It's saying if the site has posts, go get them. If it doesn't have posts, nothing will be shown.

Just remember, The Loop is a template tag. It must begin with a function so PHP stops, then end with a function so PHP stops.

Now, let's take a look at some of the other templates the index.php page can call up.

The Header Template

The Header template is the start of a theme because it tells the browser the title of your site, where to find the CSS, the RSS feed URL, the site URL, and the tagline. The header also contains the main image, as well as the navigation.

The PHP code to grab the header is <?php get_header() ; ?>

It can also contain HTML:

The <html> tag found in the header tells the browser what language you're using to write your pages.

The <head> tag tells the browser information about the document (page), but this information is not displayed on the site.

The <body> tag tells the web browser where the information to be displayed in the browser window begins.

All tags must be closed. For example: </head> or </body>.

The Sidebar Template

The Sidebar template is named sidebar.php. You'll find a sidebar either on the left or right side of your WordPress theme.

You can put information about your site, advertisements, and testimonials in a sidebar.

The PHP to grab the sidebar looks like this:

<?php get_sidebar<> ; ?>

The Footer Template

The Footer template, or footer.php, is the bottom of the page. It is called up using this piece of PHP code:

<?php get_footer() ; ?>

Other Template Files

Listed below are other template files that can be called up for certain pages on your site. These may even be part of the theme that you use for your website.