STA 02 – Theming WordPress

WordPress 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”, but one of the most important, and easiest to manipulate, is called a theme. 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

congratulations! you now have your own wordpress site, to play with as you wish. During class you will hopefully have started to understand some basic features of the wordpress system. Now, it’s time to enter the elite ranks of WordPress coders. for this assignment:

Set up your coding environment

In class we installed the wpIDE and Advanced Code Editor plugins for WordPress. Play with them both, see what you like and don’t like. For this assignment, using one of these is probably enough.

As we continue, though, you will very likely find that you need more flexibility and power from your code editor. You may, for instance, want to set up a real Revision control system, such as a linked Github repository. Or you may not be so ambitious, but simply want to have local copies of your files to test on more than one site. Or maybe you want to be able to debug your code (though we have some tricks for that).

There are a number of good free code editors, and you should try at least one or two out. Any of the ones listed below are pretty good, so find one that works for you:

  • jEdit is a cross-platform editor, very popular with many users. Be sure to enable the “ftp” plugin, and most of the other ones that have anything to do with php, html, or javascript.
  • Notepad++ (Windows only) is extremely popular and works pretty well out of the <box. You will need to be able to connect by sftp.
  • TextMate (Mac, not free) is the editor of choice for most mac-based developers
  • Komodo Edit is another cross-platform choice. It has some great features, though advanced features have been removed and are only included in their very expensive professional software.

To edit your files you will need to access this address: sftp://hackinghistory.ca/var/www/YOURNAME.hackinghistory.ca/wp-content/themes/ . You’ll use the username “hhstudents” and the password that I’ll tell you in class. It may be tricky to figure out exactly how to make this work, so be patient.

Editing your CSS

The CSS is really the heart of any theme, because it controls so much of how your site looks. Starting with the “WordPress Learning Theme”, make the following changes:

  • change all of the background colors, as well as the default font families and sizes for the most important HTML elements on your page
  • change the width of the main page so hat in fills the whole screen. then change it back, not to a percentage of the screen, but to a fixed number of pixels.
  • change the relative widths of the sidebar and main area. Can you change the height of the header and footer? How?
  • can you change the background of your header area from a color to an image?

Editing your PHP files

If the PHP template files are the heart of your theme, then, to continue running with a bad metaphor, the template files rae I guess the brain. Or maybe the limbs. Anyway they do the work of assembling pages. Read more about them here.

  • Notice that the title is missing from the Main Content Area. Can you make it show up? Hint – there’s a template tag called thetitle() that you can use for this!
  • Add at lest four new template tags to your “index.php” file.
  • Create a copy of “index.php”, called “page.php”. Can you make the sidebar disappear from the sample page, while keeping it on the blog post pages?

Custom Content Types

  • activate the historical images content type on your blog from the administrative interface by going to Cusotm Content TYpes –> Tools –> Import and previewing, then activating, historicalimages.
  • now create a historical image, and try to view it in your theme.
  • NOW go back to Custom Content Types and “view sample templates” for historical-images. Copy this text into a new file called “single-historical-images.php”
  • Try viewing again.
  • what did you learn?

Leave a Reply