For the last couple lessons we’ve been trying to drive home the point that the ethic behind WordPress (and all CMSs for that matter) is to separate the content you want to write from how you want it display it. In the previous lesson you learned how to take control of the style in which your content is displayed. In this lesson we’re going deeper and figuring out how WordPress put a page together in the first place.

Resources

Lesson Preparation

Before you dive into the lesson, we need a clean WordPress slate to start from.

    • Install a new WordPress instance at yourdomain/wplesson4.
    • Leave all the standard pages and posts from the fresh install.
    • Install the Twenty Twelve theme.
    • Create a new page titled Blog. Leave the body text blank.
    • Create a new page titled Home. In the body text, put “This is the home page”.
    • Create a new page titled About. In the body text, put your first and last name. Additionally, write a sentence or two about your project.
    • Create a custom menu that includes all of these pages, including the default Sample page.
    • Under Appearance, in Customize, set this custom menu as the primary menu. Set the Home page as the front page and Blog page as the Posts page.

Clarifying Post Types

In the following lesson, we’re going to make a lot of references to different post types and views. It’s important that we clearly define just what we’re talking about so theres no (ok less) confusion as we move forward.

Index

The front page. By default it contains your most recent posts. It is your blog.

Single Post

This is when you click on the title of a post and it takes you to a page with just that post on it

Archive Page

When you click on a date or taxonomy (tag/category) it will take you to an archive page for that thing you clicked. For example, let’s say you click on the tag “Puppy”. You will be taken to an archive page containing all the posts tagged with “Puppy”.

Search Page

A search page comes up when you search for something. It will typically have the title of each post that came up as a result and an excerpt from that page or post

Page Page

A static page that you created. Like a post but not chronological. It’s the kind of thing you would put your “About Us” in.

How is a WP Page Put Together?

WordPress uses “templates” to put together a pages.

Anatomy of a Page


One way of gaining understanding how something works is to smash it to bits and then put the pieces back together. This is more or less how computers are made. We won’t do anything as drastic, but we will bust up our sites a bit. Go to your homepage, for me it’s “brendinnye.me/wplesson4”.  You’ll see some basic page parts. For your convenience, I’ve labeled most of them.

Here is the main part

With-Style-1

And the sidebar

With-Style-2

Very simple, very straight forward. It’s very easy to see what’s on the page. What happens when we mess with things? Go to your child theme directory for yourdomain/wplesson4 and rename your functions.php file to functions1.php. This will basically unlink the parent stylesheet from the website. Remember at the end of the lesson to change the name of the functions.php file back. Refresh your page and see what’s up. It’s grotesque isn’t it? There are a couple things to note about this:

Nothing is gone. Take note that you’re looking at a bunch of HTML elements much like what you were producing back in intro to web design. Look carefully and you’ll notice that all the elements are still there. It’s all just arranged in a different way.

See the labels in these pictures:

First half of the page

No-Style-1
First half of the page

and the sidebar portion

No-Style-2

What we can take away from this weird thing I’ve had you do? Not much at the moment, but it will come in handy later. Ok, one thing we can take away is that the page is built from the top down, just like you would when hard coding an HTML page. But as we found earlier, there are no HTML pages anywhere in our WP folder. Instead, the pages are built from individual parts every time you load a page. This happens thanks to PHP.

What is PHP?

PHP stands for “PHP: Hypertext Preprocessor”. The inventor had a sense of humor. PHP is what we call a “Server Side Scripting Language”.

What Does “Scripting Language” Mean?

Scripting is a way of saying “telling the computer to do something”. We can tell it to do some math, print out some text, or call something out of a data base. Javascript is a very popular Client Side Scripting Language. That means that when it’s embedded in a webpage, then it tells the browser to do stuff (perform math, create alerts, etc.). With Server Side Scripting Language all the stuff is done on the server before the webpage is sent to your browser.

In the case of WordPress, PHP tells the server to generate some HTML depending on what page we’re on. If you look at your WP directory, then you will see a bunch of php files. These are essentially the instructions that the server uses to construct any given WordPress page.

Building a Single Post Page

For simplicity purposes, let’s look at how a single post page gets built. Click on the heading of “Hello World” to get to an individual post page (you need to open your website yourdomain/wplesson4 in a web browser). In a new tab, using CPanel, go to the Twenty Twelve theme folder for yourdomain/wplesson4.  The file “single.php” is what’s used to built single post pages, so open it up with the Code Editor tool.

Don’t Panic! This will be confusing and you won’t understand most of it. That is normal. You’re not in a PHP class and you’re not expected to become PHP coders. Even if you don’t get 99% of what you see, you’re still getting 1% and that’s something to be proud of.

single.php

Immediately, you’ll see some grey text. This is text that’s been commented out and is for your benefit.

single-php-1-10

See how they give you a helpful little explanation of what this file does? That was nice of them. We see our first PHP function start on line one with “”. That is instructions to, well, get the header. The header, in the context of WP, is the area of the webpage that contains the <head> section, the site title and description, and the nav menu. So when the PHP function runs, it’s basically saying, “Get the <head> section, the site title, the site description, and the nav menu. Then we can make the rest of the page.”

You’re about to get mad at me. We shouldn’t be in single.php. We jumped the gun a little. The header gets built first, so look for the file “header.php” and open it.

header.php

Sorry for jerking you around. Anyway, now that you’ve got header.php open, you’ll see a whole bunch of incomprehensible code. What’s it all mean? We can’t go through every line but we can identify a few parts. Look on line 38. It starts with <h1>
That’s straight forward enough. That’s something you could do. It’s the opening tag for a size one heading and they’ve given it the class “site-title”. If you inspect the site title using Firebug, then you’ll see it has the class “site-title”. Naturally, what should follow is the title of our site, in my case Donkey. What do you see after it?

temp1

Well that’s weird. What does it all mean? Let’s think about what the site title is and does. In another window, hold the mouse over your site title for a few seconds and you’ll see that a little tool tip comes up. Click on it, and it takes you back to the homepage. So it sounds like what we have is an h1 that is a link with the title that’s the same as the text it displays. Would it make more sense if we wrote it like this?

<h1><a href=”http://brendinye.me/wplesson4″ title=”Lesson4″ rel=”home”>Lesson4</h1>
<

That’s what we’re left with when we load the actual page. What happened was all that funny looking PHP code called up the URL for our homepage, and the title of our site for the title attribute (what get’s displayed when you hover over a link). It also generated the actual text for the link.

href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”

Calls up the website’s home address URL

title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”

Calls up the site’s URL

<?php bloginfo( 'name' ); ?>

Calls up the website’s title.

That’s how it’s done. Basically the same thing happens on the next line with the site description, and the same thing a few lines down with the navigation menu, and a few lines below that for the header image if you have one.

Why all this crazy PHP, you ask? I answer with, How else could we do it? Twenty Twelve is a generic theme. It comes stock with every installation of WordPress and is identical for everyone who uses it. No two people have the same website, but there are 10,000 people right now who have the same theme. Without PHP, the theme would have to be fundamentally customized for each individual website. It might not seem like a big deal right now when all we’re talking about is something as simple as the site title, but it has big implications when you start thinking about your post content, or links, or all the other things that make up your site. Speaking of post content, let’s go back to single.php.

content.php

We won’t go through every line here. You can download one of our marked up versions of Twenty Twelve if you want to see notes and explanatory comments out the wazoo. We’re just going to look at the essentials.

Starting on line 19 of content.php:

temp2

Starting from the top, it says 1) if we’re dealing with a single post then 2) just display the title of the post as an <h1>with the class “entry-title”. 3) If it’s not a single page, i.e. we’re dealing with the frontpage or an archive or search page, then display the entry title as a link. 5) That’s the end of this “if statement” on to the next thing.

Translation: It checked if we were looking at a post on the front page or one on a single page. Since we were on a single page, it made the title of the post that was NOT a link. What’s next?

On line 33, we have our next important block:

temp3

This block is saying, 1) Is this a search page? 2-4) if so, create a <div> called “entry-summary” and display the post excerpt. 5) Otherwise, 6) create a <div> called “entry-content” and 7) put in the post content.

Translation:”If we’re on a search page, then display all the excerpts of posts. If it’s anything else, display the content of the post.” Then it calls some post metadata like tags, categories, and date. At any rate, it’s done. Back to single.php

Back to single.php AgainLine 19-23 calls up the “previous post/next post” links. Line 25 calls up the comments box. Line 27 tells the server that the loop is over. It’s made its post and can continue on building the page. Lines 32 and 33 call the sidebar (widget area) and footer respectively. It does this by running the code in sidebar.php and footer.php. We could go through them but you probably have major brain torshe right now so let’s not do that.

There you have it! That wasn’t so complicated was it?

So That’s How it Was Built, But Where Does the Data Come From?

Good question. We just described in painful detail how a page is put together, but it still doesn’t answer the question of where our posts and pages are actually stored. Search all through your root directory and you’ll never find the post “Hello World” (for more on this, check out the screencasts “How is WP Different from HTML Sites” Parts 1 and 2). Instead we had all these PHP functions build the post. The actual content of that post is found in your MySQL database. Remember when we created the database and user when we installed WordPress manually? No? If you want to know how, check out this screencast. When we did that, we were creating the place where all our data would go.

This screencast will walk you through the relationship between the database and your WordPress site

Text Walk Through of WordPress Databases

Consider again our first post, “Hello World”.

Here is the main part

With-Style-1

Forget about the header stuff (Site name, description, nav menu) for now. and just focus on the content (the title, and post content). We want to see exactly where they are. In your cPanel, go to the item “phpMyAdmin” it’s under the Databases section. phpMyAdmin is the tool included with cPanel to interact with your databases. Click on “Databases” in the toolbar and then select the database that you created for this instance of WordPress.

phpmyadmin-databases

You will be greeted by a list of tables.

phpmyadmin-tabe
Think of these as interrelated spreadsheets. The table that we’re interested in is called “wp_posts”. This table contains all posts, pages, media attachements, custom menus, and more.

wp_posts-in-phpmyadmin

In here you will find a long spreadsheet (24 columns). Each of these columns tells us a particular thing about that post.

Here we see that each post has a bunch of information about it, but for this lesson we’re just interested in the two columns “post_content” and “post_title”. You can guess what these store. That’s right! The title of the post and the content of the post. If you alter the post title in your WP post editor, then you can refresh the phpMyAdmin page and see that the change has take effect there too.

We could spend a year talking about this, but we’re just going to leave at at this for now. What we want you to take from this is that your post data is all stored in a “database” and PHP code calls up things from that database.

If you want to play around in your database, please do so carefully. Backup before you do so, and keep in mind that you may break everything. If you must, consider using a 3rd party database client. They make editing easier.

Creating Your Own Template Files in Your Child Theme

The HW is going to have you messing around in the template files we just discussed. As we discussed last week, child themes offer a layer of protection between your parent theme and the edits we make. You’ve seen this in action with your style sheets. Child themes also allow us to make custom template files without worrying about screwing anything up.

Adding Template Files to Your Child Theme

Simply duplicate the template file you want from your parent theme and place it in your child theme. Make sure to remove the word “copy” from the end of the duplicate’s name. This will override the parent theme’s template file and call up yours instead. If you mess up a template file really badly, then you can just throw it away and try again wit a clean version!

Code Notes

We’ve developed a helpful way for you to reveal page elements. Basically, you go through template files to find where important things are generated and then insert a piece of text beneath it so that when you load the page, you’ll see know what you’re looking at.

It’s best to make them unobtrusive, so give them a custom css class. Here’s an example of the HTML you would insert into your template file underneath the site-description

<span class=”codenote”>This is the site-description</span>

Then in your stylesheet, make a CSS rule to make the text small, monospace font, and have no margins. Watch this screencast for more in depth instructions.


Homework

All of this homework will be done on your WordPress instance located at yourdomain/wplesson4.

A note on Developer Tools Copypasta

Often, students forget something important to using child themes: Simplicity. Many people use the method of figuring out how to make a desired change by using developer tools, then copy/pasting the CSS into their stylesheets. This is a great way to learn, but this method carries baggage with it. Often you paste several lines of CSS when you only needed to change one thing. You need to delete the stuff that you didn’t change. Child themes are only for changesThis is an important concept to understand and for that reason, any submitted style sheets containing superfluous, unaltered CSS will receive a penalty.

Create a child theme for the Twenty Twelve theme on yourdomain/wplesson4.

Part II: Revealing the Page Components

Add Code Notes

Create copies of the below template files and put them into your child theme folder. This way you can alter them without risking damage to the parent theme and can start over easily if you break everything.

Add explanatory code notes below the following page elements. For example, if you’re putting a code note under the Site Title, you could write “.site-title” or “This is the Site Title”. For your convenience, we list them by php file

In header.php

Site Title
Site Description

In content.php

Entry Title (the one that creates a link)

—And—

Entry Title (that doesn’t make a link)

In footer.php

Above the Site Info (where it says “proudly powered by WordPress”)

In Sidebar.php

Above the widget area

Style the Notes

Create a CSS class to style your notes to make them unobtrusive. Make them a color that will stand out, make them have no margins on the top and bottom, and make them a monospace font.

Part III: Rearrange The Page Components

This theme is your’s to screw with. Be brave and take control.

Rearrange the code in the template file so that the navigation menu and site title/description switch places. In other words, the site navigation will rest right on top of the site header.

Style These Components

Navigation Menu

Make sure you’re using the custom menu that you created.

Make the menu items centered.

We also want to tighten things up a bit. Remove the space between the navigation menu and the top of the page div (that’s where it turns from grey to white)

Site Header

Get rid of the space the top and bottom of the site header.

Change the site title to be right aligned and the site description to be center aligned.

It should end up looking something like this:

example of hw

Completeness Checklist

  • Create a child theme for the Twenty Twelve theme.
  • Copy necessary template files into your child theme
  • Create a CSS class for your code notes in the manner described
  • Add code notes to the places listed
  • Move the navigation menu to be on top of the site header
  • Alter the spacing of the navigation menu and site header in the specified ways
  • Style the navigation menu and site header in the specified ways
  • You can check brendinnye.me/wordpresspart2/lesson3 for an example

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line in the following format: HW #4 Firstname Lastname
  • The web address of your WordPress instance yourdomain/wplesson4
  • Download a copy of your child theme and attach it to your email as a zip file