Lab 05: Theming with wordpress

theming with wordpress

Themes are collections of files

  • they live in your wordpress install:
  • wpid-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


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:


Here is a more detailed view:


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

  • install the wp-ide plugin to enable you to do syntax-highlighted code editing in your browser. If the interface feels a little awkward try better file editor instead – it may be sufficient for our needs (I haven't experimented with it yet).
  • 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.


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…