Lab 10: WordPress & WordPress Themes

qWordpress is a sophisticated “Content Management System“ that uses a database to store your content, and a set of short programs written in the PHP programming language to present that content in a consistent manner. THere are many parts to this PHP ”engine“, including especially themes and plugins. In this exercise you will start to set up your own wordpress site, and begin to get familiar WordPress themes are potentially very powerful, but they can also be quite simple. In this exercise we will start modify a very, very simple theme, changing the colour scheme and layout of your website’s presentation.

Getting Started

In your personal wordpress installation – available at http://yourname.hackinghistory.ca – you will have access to a completely breakable sandbox environment. Go wild!

Content Management Systems

  • a CMS is a system that allows web pages, and structured sets of pages, to be constructed from existing documents and text/HTML entered by users who may have little knowledge of HTML or the other underlying technologies that display those pages. There are hundreds of CMS’s in existence today, some Free/Open Source, others distributed under non-free licenses.

What is WordPress?

Take a look at this chart: data_and_metadata_on_the_web.png

  • WP assembles a page from many component parts. This is accomplished by a now-complex set of scripts that offers instructions on what data to pull from the database and how to represent it on the page.
  • the underlying scripts are primarily written in the computer language PHP, one of most popular languages for web “server-side” programming. When a URL belonging to the site is requested, the WordPress scripts activate, parse the URL, and translate it into a set of instructions which are used to generate the HTML for the specific page we want.

Posts and Pages

WordPress is highly extensible through the Plugin system. However, the default installation of WordPress comes with two main types of content:

  • Posts show the origins of WordPress as a blogging engine – they’re a kind of content that’s expected to be updated frequently, and to be of largely trnasitory interest; and
  • Pages, which are relatively permanent pieces of content that help populate, for instance, your menu system.

You’ll often see other kinds of content – events, for instance, or links , biblographies, Facebook-style status updates; these are additional functionality that may or may not be available to you.

Databases

  • We won’t go into this here, but the information you see in a post is distributed across many entries in a relational database. Knowing this can sometimes help you to track down errors that sneak into your website through admin carelessness.

Themes, Styles and Templates

  • The look and feel of your website is also controlled by PHP files, often with help from files written in other languages, especially CSS and Javascript. Sometimes the look of your website will be affected by Plugins, but most of what you see is related instead to your Theme.
  • A Theme is a collection of files – at minimum two, but often many more – from which wordpress takes instructions when presenting the page. There are thousands of themes in the official directory and thousands more for sale or download outside it.
  • The easiest way to install a new theme is to download it using the WordPress Admin interface. Sometimes this won’t work – if you’re writing your own theme, for instance! I’m hoping we will have a chance to write our own Child Themes later on, so if you want to do that, drop me a line and I’ll hook you up with FTP access to the server.

Themes are collections of files

  • they live in your wordpress install:
wp-file-structure.jpg

Themes are written primarily in PHP

PHP is a programming language developed specifically for writing web pages. Most PHP files consist of HTML and PHP intermixed with each other. This can be a little confusing, but you will get used to it. We will puzzle through the PHP syntax together, but you might want to try the Codeacademy PHP track as an introduction to the language basics. Knowing just a little will make your work a lot easier next semester.

<?php echo('Hello World'); ?>

Themes tell wordpress how to display your content

wp.jpg

Understanding the Loop

One of the first things you will encounter in a WordPress theme is “the loop”, which usually looks like this:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <!-- do stuff ... -->
<?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

This is a little hard to read, because it uses PHP’s hideous alternate syntax for control structures. Let’s rewrite it in the ordinary syntax:

<?php 
if ( have_posts() ) {
        while ( have_posts() ) {
                the_post(); 
                //
                // Post Content here: do stuff
                //
        } // end while
} else {  ?> 
    <p>
    <?php _e( 'Sorry, no posts matched your criteria.' ); } // end if/else ?>

What the heck does this mean? Well, you’ll see there is a while loop wrapped in an if test. Then there are two functions – can you see them? The wordpress docs explain it this way:

In English (PHP types and people familiar with code speak can skip to below), the above would be read: If we are going to be displaying posts, then get them, one at a time. For each post in the list, display it according to <!– do stuff … –>. When you hit the last post, stop. The do stuff line(s), are template dependent.

A little aside on Do stuff: in this example it is simply a placeholder for a bunch of code that determines how to format and display each post on a page.

Digging a little deeper, we find:

An explanation for the coders out there: The have_posts() and the_post() are convenience wrappers around the global $wp_query object, which is where all of the action is. The $wp_query is called in the blog header and fed query arguments coming in through GET and PATH_INFO. The $wp_query takes the arguments and builds and executes a DB query that results in an array of posts. This array is stored in the object and also returned back to the blog header where it is stuffed into the global $posts array (for backward compatibility with old post loops).

So, basically:

  • the_post() is a function that grabs one member of an array of posts – itself a very complex object – and dumps it into a new object called $post.
  • Within the loop, you will then call on other function to access properties of the post. You can also access those properties directly, but it is often hard to do that. So, for instance, you might write:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
    <header>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </header>
    <div class="entry-content">
        <figure><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?></a></figure> <?php the_excerpt(); ?>
    </div>
</article>

<?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Let’s go over each of these functions in class.

Files in your theme

  • style.css: your stylesheet; you need this
  • functions.php: you’re going to need this too
  • index.php: this is the default template for your theme; you can’t live without it
  • header.php: controls your header.
  • footer.php: controls your footer area
  • sidebar.php: generates your sidebar

Template hierarchy

remember this:

wp.jpg

Here is a more detailed view:

Template_Hierarchy.png

When accessing a piece of data from the database, WordPress will check in sequence to see if appropriate templates are available and use the first matching template it finds.

Plugins and themes

  • Themes control appearance
  • plugins add functionality
  • but sometimes the difference isn’t so clear
  • We will try to keep things pretty well-separated, but sometimes it’s just much easier to do all your programming in a theme.

Editing Your Theme

  • I recommend editing directly from Atom. We’ll discuss in class how to do it. However, if that doesn’t work, you can try one of the options below:
    • install one of several WordPress plugins that make theme editing a litlte easier:
  • try changing the ’powered-by’ text in the footer to our starter theme. Did you make it work? Did you (alternatively) break the Internet?
  • Check out functions.php, and then sidebar.php. Can you understand what’s going on? It’s not easy to understand!
  • try editing the css enough so that you can get something un-hideous.

Headers

Right now there is no custom header support in our theme! To use a header image, add this code to functions.php:

<?php add_theme_support('custom-header); ?>

And put this somewhere in header.php:

<img src="<?php echo( get_header_image() ); ?>" alt="<?php echo( get_bloginfo( 'title' ) ); ?>" />

Learn much, much more

There is a huge amount of information online at the WordPress Codex. That last link is a good starting point, and so is the Theme Development Page. There is lots and lots and lots to learn here…