Download - Anatomy of a Wordpress theme
![Page 1: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/1.jpg)
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
![Page 2: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/2.jpg)
Wordpress themes admin interface
2
![Page 3: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/3.jpg)
Wordpress themes directory
• h7p://wordpress.org/extend/themes/3
![Page 4: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/4.jpg)
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
![Page 5: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/5.jpg)
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
![Page 6: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/6.jpg)
Anatomy of a Wordpress theme
• wordpress themes are installed to the wp-‐content/themes directory
6
![Page 7: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/7.jpg)
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
![Page 8: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/8.jpg)
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
![Page 9: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/9.jpg)
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
![Page 10: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/10.jpg)
header.php template file
10
view-‐source in the browser
![Page 11: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/11.jpg)
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
![Page 12: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/12.jpg)
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
![Page 13: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/13.jpg)
Anatomy of a Wordpress theme
13
![Page 14: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/14.jpg)
Anatomy of a Wordpress theme
14h7p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
![Page 15: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/15.jpg)
Anatomy of a Wordpress theme
15h7p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
default template for a single post -‐ single.php
![Page 16: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/16.jpg)
Template Hierarchy
16
h7p://codex.wordpress.org/Template_Hierarchy
![Page 17: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/17.jpg)
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
![Page 18: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/18.jpg)
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
![Page 19: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/19.jpg)
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
![Page 20: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/20.jpg)
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
![Page 21: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/21.jpg)
sidebar -‐ widgets
21
![Page 22: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/22.jpg)
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
![Page 23: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/23.jpg)
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
![Page 24: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/24.jpg)
single.php
• displays the enJre contents of a single post• may display comments if enabled• usually includes header and footer template files
24
![Page 25: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/25.jpg)
page.php
• displays the contents of a wordpress page content item• may display comments if enabled• usually includes header and footer template files
25
![Page 26: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/26.jpg)
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
![Page 27: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/27.jpg)
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
![Page 28: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/28.jpg)
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
![Page 29: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/29.jpg)
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
![Page 30: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/30.jpg)
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
![Page 31: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/31.jpg)
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
![Page 32: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/32.jpg)
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
![Page 33: Anatomy of a Wordpress theme](https://reader034.vdocument.in/reader034/viewer/2022052619/5554eb9cb4c90566278b4c6f/html5/thumbnails/33.jpg)
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