anatomy of a wordpress theme
DESCRIPTION
A look at how a Wordpress theme is constructedTRANSCRIPT
Wordpress themes
• Wordpress can install themes to change the “look and feel” of the site.• h7p://wordpress.org/extend/themes/• Your first assignment is to create your own wordpress theme which uniquely services the content and purpose of your site.
1
Wordpress themes admin interface
2
Wordpress themes directory
• h7p://wordpress.org/extend/themes/3
Using a pre-‐made theme
• Advantages– quick & easy– plenty of well-‐made free themes– can modify to suit your own needs
• Disadvantages– generic -‐ so not made with your unique content or aestheJc in mind– depending on how much customisaJon you do, it can actually end up taking you longer and cosJng more than doing your own from scratch
4
CreaJng your own theme from scratch
• Disadvantages– can take longer and be costlier– you have to learn how to make themes
• Advantages– Unique– completely flexible and customisable– complete control over resources -‐ no waste– you get to learn how to make themes!
5
Anatomy of a Wordpress theme
• wordpress themes are installed to the wp-‐content/themes directory
6
Anatomy of a Wordpress theme
• consist of a collecJon of php files as well as one or more css files and associated resources (e.g. imagery, javascript files etc.).
7
Anatomy of a Wordpress theme
• php files contain html markup interspersed with php snippets which retrieve content from the wordpress database and output the result to plain html for the browser to render
8
Template tags
• Wordpress uses it’s own php funcJons called template tags to output informaJon to the page.• For example in the next slide the template tag bloginfo is used to get the name of the site from the database and output it within the <Jtle> html element. • These handy funcJons save us from wriJng a lot of extra php code.
9
header.php template file
10
view-‐source in the browser
So where do we find out what data wordpress can retrieve and what php code retrieves it?
• The wordpress codex–h7p://codex.wordpress.org/Template_Tags–h7p://codex.wordpress.org/FuncJon_Reference/bloginfo
• Look at other themes• google it– e.g. h7p://www.google.com.au/search?hl=en&qscrl=1&q=wordpress+display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai=
11
Anatomy of a Wordpress theme
• wordpress page structure can be logically secJoned into a number of building blocks.• each of these blocks correspond to a separate php file in the theme directory (wordpress expects these files to have parJcular names like header.php, footer.php, sidebar.php etc).• each block (file) can be included and reused in mulJple page templates using template tags like <?php get_header(); ?>
12
Anatomy of a Wordpress theme
13
Anatomy of a Wordpress theme
14h7p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
Anatomy of a Wordpress theme
15h7p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
default template for a single post -‐ single.php
Template Hierarchy
16
h7p://codex.wordpress.org/Template_Hierarchy
Anatomy of a Wordpress theme
• Use as much or as li7le of the template hierarchy as your site requires.• lets look at some of the most common template files...
17
header.php
• usually contains the doctype, metadata and <head> secJon of the html document• may contain the top navigaJon• include the header in other template files to avoid duplicaJng the code it contains with <?php get_header(); ?>
18
footer.php
• anything you would normally put in a common page footer. • include the footer in other template files to avoid duplicaJng the code it contains with <?php get_footer(); ?>
19
sidebar.php
• commonly contains:– navigaJon (main and/or subnav)– links (internal and external)– searchform– widgeJsed plugins that can be added and removed through the administrator interface (dashboard)
• include the sidebar in other template files with <?php get_sidebar( $name ); ?>
20
sidebar -‐ widgets
21
The content
• Wordpress has 2 main content types, posts and pages• The 3 main template files associated with displaying these are single.php, page.php and index.php
22
index.php
• default frontpage• usually displays excerpts of recent posts• use the wordpress loop to ouput posts– h7p://codex.wordpress.org/The_Loop
• usually includes the header, footer and sidebar template files
23
single.php
• displays the enJre contents of a single post• may display comments if enabled• usually includes header and footer template files
24
page.php
• displays the contents of a wordpress page content item• may display comments if enabled• usually includes header and footer template files
25
categories.php• wordpress supports categorising posts in a custom taxonomy.• It can be useful to have pages that only show posts in a given category.• You can provide a navigaJon menu that links to various categories as a way of secJoning your site content.– e.g. h7p://www.smashingmagazine.com/
26
funcJons.php
• the funcJons file is different in that it doesn’t map to any displayable content block on the page• it is simply a place to store any reusable funcJons that can be used by any other template files.• it is automaJcally “included” by Wordpress (so you don’t need to use include or require statements before accessing it from another template file)
27
Anatomy of a Wordpress theme
• for a more detailed and complete list of template files see the Wordpress codex, parJcularly:– h7p://codex.wordpress.org/Stepping_Into_Templates– h7p://codex.wordpress.org/Theme_Development– h7p://codex.wordpress.org/Site_Architecture_1.5– h7p://codex.wordpress.org/Template_Hierarchy
• for a complete list of wordpress funcJons and template tags (the bits of php you use to get stuff from the database) see the following:– h7p://codex.wordpress.org/FuncJon_Reference– h7p://codex.wordpress.org/Template_Tags
28
NavigaJon menus
• the template tags wp_list_pages and wp_list_categories will output a list of links (<li><a>...</a></li>) that can be styled like any list based navigaJon menu.– h7p://codex.wordpress.org/FuncJon_Reference/wp_list_pages– h7p://codex.wordpress.org/Template_Tags/wp_list_categories
• CSS lists -‐ h7p://css.maxdesign.com.au/listamaJc/
29
So what about the CSS?
• This is probably the least different part of developing a Wordpress theme compared with a staJc website.• The style.css sits in the theme directory and is usually added to the header.php with a standard link tag, but with a Wordpress funcJon in place of the url.– <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
• Get used to using firebug or a similar html/css inspecJon tool -‐ it is even more of useful when working with dynamic websites.
30
Installing the theme
• Wordpress looks for some pre-‐defined text in a comment block at the top of style.css so it can display this informaJon about the theme in the administrator interface.
31
Installing the theme
• it also looks for a file called screenshot.png in the template directory to provide a preview thumbnail of the theme
32
Installing the theme
• installing the theme is simply a ma7er of pupng the theme folder in the wp-‐content/themes directory and acJvaJng it through the Wordpress admin interface.
33