Student Showcase

At the beginning of class, let’s look at your Midterm Project work-in-progress for your home page HTML and CSS.

Repeating the WordPress Install

Install a fresh copy of WordPress in XAMPP/MAMP for today’s exercises:

  1. Download WordPress.
  2. Get XAMPP/MAMP running.
  3. Open phpMyAdmin.
  4. Create a new database.
  5. Create a new user and give yourself a password and full permissions to use the database.
  6. Move the WordPress folder into the htdocs folder inside XAMPP/MAMP.
  7. Open the WordPress location in Firefox.
  8. Follow the instructions for creating the config file and running the installation.
  9. Login to the /wp-admin/ folder inside your WordPress folder.
  10. Open the WordPress blog in a separate tab.
  11. Refamiliarize yourself with the WordPress interface.
  12. Go to Appearance > Themes from the Dashboard and activate the Twenty Thirteen theme.

Basic Theme Structure

WordPress is built with a combination of HTML, CSS, and PHP. Take a look at the code inside the PHP files in the /wp-content/themes/twentythirteen/ folder. In particular, take a look at:

  • archive.php
  • category.php
  • comments.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • single.php
  • tag.php

Now consider these questions:

  1. What role do each of these template files play within the blog’s theme?
  2. Which of these files are for whole-page frameworks and which ones are for content areas inside a page? How can you tell?

Inside the wp-content folder are all the files you as a designer should ever need to work with (with rare exception.) The other two folders (wp-admin and wp-includes) contain the core functions of WordPress and are best left alone. Besides, any changes in those folders are likely to be overwritten on your next WordPress upgrade.

Template Tags

WordPress is written in PHP but works a little like jQuery in that many common functions are written deep within the WordPress core. We just use template tags in order to make use of those functions over and over in different ways.

Here are some examples:

<?php bloginfo(‘name’); ?>

Wherever you place this template tag inside of a theme PHP file, it will output the name you’ve assigned to the blog, when viewed in the browser.

<img src=”<?php bloginfo(‘template_directory’); ?>/logo.gif” />

This one will pull the requested image from the folder of whichever theme is currently active. The stuff inside the parentheses are called parameters, and they further specify what is wanted on the page.

Take a look inside those template PHP files again. What other template tags can you find? What do you think they do?

Include Tags

Include tags are special kinds of template tags which tell the browser to plunk another template file into the page.

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>

The first two have parentheses, but don’t actually take any parameters. They simply include the header or footer, respectively.

The third one, get_sidebar(), can take parameters:

<?php get_sidebar(‘left’); ?>

This would include sidebar-left.php rather than the default sidebar.php, so you’d need to create that file, of course.

What do you think this include tag does? Can you find a template PHP file that uses this tag?

<?php comments_template(); ?>

Conditional Tags

Sometimes you need to check first if certain conditions exist before putting content onto the page. This is where conditional tags save the day. Conditional tags usually follow this flow of logic:

  • if (such-and-such condition exists)
    • do this
  • otherwise do this

Take a look at this bit of code and guess what it does:

<?php if (is_home())
echo ‘<p class =”welcome”>Hey you, welcome to the site. I love new visitors!</p>’;
} ?>

Now try this:

<?php if (is_category(‘very-special’)) {
else {
} ?>

The WordPress Loop

The loop is basically is a PHP query that talks to WordPress and makes it output the things requested. The loop is the heart of WordPress, and it resides in your theme’s template files. If you want to create sites using WordPress, you need to understand the loop.

The Basic Loop

Luckily, the basic loop is pretty easy. It starts with this:

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

And ends with this:

<?php endwhile; else: ?>
<p>Some error message or similar.</p>
<?php endif; ?>

The error message is not required, but it lets the user or admin know what may have gone wrong if there’s no content to display.

Check out this complete loop:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php
the_title();?>”><?php the_title();?></a></h2>
<?php the_content(); ?>
<?php get_comments(); ?>
<?php endwhile; else: ?>
<p>Something went wrong! Please try again.</p>
<?php endif; ?>

What does it do?

The basic loop checks if there are any posts to return, and in turn the loop is controlled by the
global blog settings (how many posts to display and such), and whereabouts on the blog you are. A single post would return just one post (the one you want presumably), while a category listing would return the number of posts specified in the WordPress settings, but only the ones that belong to that particular category.

If there are posts, a while loop is started, and as long as there are posts to return, as controlled by the situation and settings, posts will be returned and displayed. When the while loop is done (all posts that should be returned have been output), it ends with endwhile, and then the loop ends with endif.

Should there be no posts that match the criteria of the particular situation, the else clause is
called, and that’s when the error message (or similar) will be output. Or nothing at all, if there is nothing defined. After that, the loop ends.

So the loop actually loops content from the database, based on the WordPress settings and any criteria that the page you’re on may bring.

Try locating something similar to this in index.php or archive.php.

Exercise: Toying Around with an Existing Theme

Let’s start by putting some random content into your WordPress installation:

  1. Go to Settings > General to give the blog a name and a tagline.
  2. Add two or three more posts, with categories and tags defined for each.
  3. Add some comments to the posts through the front end.
  4. Add a page or two.
  5. Go to Appearance > Widgets in the Dashboard. Drag the following into the Main Sidebar area on the right (give each of them appropriate settings:
    • Search
    • Categories
    • Archives
    • Tag Cloud
  6. Make a 1600×230 header image. Go to Appearance > Header and upload it there.
  7. Open up the style.css file inside /wp-content/themes/twentythirteen/ in Dreamweaver.
  8. Open the home page for the blog in Firefox, and activate Firebug.
  9. Right-click on any page element you want to inspect or change the styling for, and select Inspect Element.
  10. Firebug will show you on the right-hand side what styles are controlling the element you’ve chosen. On the left will be displayed the HTML code. The most specific CSS will be listed at the top of the Style panel. Also displayed are the code lines within style.css.
  11. You can experiment with new values right there in the Firebug Style panel, or go ahead and change them in style.css (either way, make sure that the changes you like end up in style.css, not just in Firebug.)
Firebug HTML and Styles panels
  1. Now go to a page for a single post and adjust the styles there.
  2. Try adjusting the styles for content in these places as well:
    • header
    • sidebar
    • footer
    • category listing
    • search results