theming with wordpress
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
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' ) ); ?>" />