Cms & wordpress theme development 2011
-
Upload
dave-wallace -
Category
Technology
-
view
1.767 -
download
1
description
Transcript of Cms & wordpress theme development 2011
![Page 1: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/1.jpg)
Why CMS? (Content Management Systems)&
Wordpress theme development
![Page 2: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/2.jpg)
• first, a quick recap...
![Page 3: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/3.jpg)
So what are the trends?
• More content
• More frequently (up-to-date and on-demand)
• From more sources (crowd sourcing, mashups etc)
![Page 4: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/4.jpg)
So what are the trends?
• More contributors. As a web designer you need to at least have an understanding of all these areas and how they fit together.
![Page 5: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/5.jpg)
So what are the trends?
• Moving away from a static web towards a dynamic web.
![Page 6: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/6.jpg)
Static vs Dynamic Website
![Page 7: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/7.jpg)
Advantages of static websites
• Lower entry barrier for development (just plain old html and css files).
• Simple hosting requirements
• Easily cacheable
• Can be viewed “offline”
![Page 8: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/8.jpg)
Disadvantages of static websites
• Much less scope for interactivity, customisation, personalisation.
• Every little change/update needs to be done manually.
• Version control issues with multiple contributors.
![Page 9: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/9.jpg)
Dynamic website
• Website content is stored in a database (and/or other external sources) and assembled with markup and output by a web server script.
![Page 10: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/10.jpg)
Advantages of dynamic website
• Content can be updated in a decentralised way. (a single “webmaster” does not have the sole privilege/responsibility of updating the website)
• Modularisation and reuse of common code (e.g. headers, menus).
• Automation
![Page 11: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/11.jpg)
Disadvantages of dynamic website
• Higher entry barrier / learning curve for development
• More complex web server requirements
• Issues with pages being indexed by search engines.
• Overall the benefits will almost always outweigh the disadvantages.
![Page 12: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/12.jpg)
Web Content Management Systems (WCMS)
• Basically a series of interfaces for performing common tasks by various users of a dynamic website.
• ... and an official definition ...
• A Content Management Systems (CMS) is a tool that enables a variety of (centralised) technical and (de-centralised) non technical staff to create, edit, manage and finally publish (in a number of formats) a variety of content (such as text, graphics, video, documents etc), whilst being constrained by a centralised set of rules, process and workflows that ensure coherent, validated electronic content.
• Enterprise Content Management (2008) What is a Content Management System or CMS? Available from: http://www.contentmanager.eu.com/history.htm (Accessed 20/08/09)
![Page 13: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/13.jpg)
Advantages of using a CMS• It makes managing lots of constantly updated content manageable.
• What kind of management?
• updating, publishing/unpublishing, archiving, searching, moderating, automating, securing etc.
• By providing administration interfaces it (ideologically at least) allows people with no understanding of web architecture to become content publishers.
• Internal and external (e.g. users can be leveraged as content contributors)
• User level access.
• Automation of processes
• Common architecture means development of reusable plugins, templates/themes etc
![Page 14: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/14.jpg)
Disadvantages of using a CMS• More complicated to set up
• Level of technical knowledge required for developer AND designer increased
• Designer needs to understand to an extent what constraints/conventions a design needs to be compatible
• These will be different for every CMS and often difficult to determine definitively.
• ‘One size fits most approach’
• Any ‘out of the box’ solution will force you into a certain way of doing things
• Many CMSs are extendable/customisable, but even these processes follow certain models/conventions
• At what point of does it make more sense to build your own CMS from scratch?
![Page 15: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/15.jpg)
Disadvantages of using a CMS
• Upgrading the underlying technologies of the CMS may be difficult or impossible (especially if you have customised core code)
• Migrating content to a different CMS may be difficult or impossible
• In a rapidly evolving website, how do we know the current solution will still be the best one in a month, a year, 10 years?
• What if we can’t export the content and view it outside the context of the CMS?
• Search Engine Optimisation (SEO) issues associated with dynamic web sites.
![Page 16: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/16.jpg)
Common WCMS features
• Automated Templates
• Easily Editable Content
• Scalable Feature Sets
• Web Standards Upgrades
• Workflow Management
• Delegation
• Document Management
• Content Virtualisation
![Page 17: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/17.jpg)
Content Management Confusion
• So how many WCMS exist?
• http://en.wikipedia.org/wiki/List_of_content_management_systems
• Why are there so many?
![Page 18: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/18.jpg)
Which CMS!?
• Choosing a WCMS:
• Your needs, eg. technological, knowledge
• Client needs, eg. content to be managed, costs, timeframe
• CMS options, eg. Licensing, development team, security, accessibility and code quality, documentation and training, support
• Boag, P (2008) too many content management systems. Available from: http://boagworld.com/technology/too-many-content-management-systems (Accessed 20/08/09)
![Page 19: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/19.jpg)
When not to use a CMS
• If you have a website with a small amount of static content that will never change very frequently the overhead of setting up an elaborate CMS solution is probably not worth it. Don’t believe the hype!
• If the design and/or architecture of your website is highly unique/specialised then attempting to make it work with an out-of-
![Page 20: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/20.jpg)
Which CMS?• What are the requirements of my website?
• From a design perspective (both presentation and content)
• From an economic perspective
• From a technological compatibility perspective
• Now and in a month, a year, 10 years...?
• Which CMS solution best meets these requirements?
• Research, research, research! Jumping the gun at this point could turn into a costly mistake later on.
• Try before you buy! (so to speak)
• http://www.opensourcecms.com
![Page 21: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/21.jpg)
Which CMS!?
Complexity
Versa4lity
![Page 22: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/22.jpg)
Why Wordpress?• It is a good platform to ease you into the world of CMSs
• It is relatively simple, but its functionality can be expanded greatly with a little extra work.
• Free and open source
• Popular
• Excellent documentation
• Plenty of 3rd party tutorials
• It has a few years behind it now and is being actively developed (it probably isn’t going away anytime soon)
• It has a good track record of upgrading to new features without breaking old ones.
• Runs on the very common W/M/LAMP server stack
![Page 23: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/23.jpg)
• Blogging Tool
• Brief History
• Roots and development date back to 2001
• In 2005, version 1.5 was released which introduced themes, wordpress.com hosting startedIn 2006, 191,567 downloads, 371 plugins
• In 2007, 2.9million downloads, 1,384 plugins
• Is Wordpress a CMS?
![Page 24: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/24.jpg)
Wordpress Plugins = CMS?• “Plugins can extend WordPress to do almost anything you can imagine.”
Community contributed plugins that extend the Wordpress installation.
• http://wordpress.org/extend/plugins/
• Some wordpress plugins designed to add CMS features:
• Custom Admin Menu
• Clutter Free (hides features from clients)
• Wordpress Dashboard Editor
• Custom Write Panel (create your own custom fields)
• WP Contact Form
• fGallery (image gallery that supports light box)
• User Permissions
• WP E-commerce
• Just about anything
• http://www.kongtechnology.com/2008/02/29/how-to-turn-wordpress-into-a-cms-website/
![Page 25: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/25.jpg)
Example: Rebranding using the custom login plugin
![Page 26: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/26.jpg)
Wordpress sites don’t have to look like blogs
• There is no doubt that Wordpress began its life as a blogging tool, but with each version it gains more CMS features.
• There are many websites built on Wordpress that would not be considered blogs.
![Page 27: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/27.jpg)
Flickout.com
![Page 28: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/28.jpg)
LucasHirata.com
![Page 29: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/29.jpg)
More Wordpress sites that don’t look like blogs
• h;p://designtutorials4u.com/30-‐crea4ve-‐wordpress-‐sites-‐that-‐dont-‐look-‐like-‐blogs/• h;p://blogsessive.com/blogging-‐tools/10-‐beau4ful-‐wordpress-‐websites/• h;p://pelfusion.com/inspira4on/30-‐wordpress-‐based-‐websites-‐that-‐dont-‐look-‐like-‐blogs/• h;p://www.websitetology.com/?p=244
29
![Page 30: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/30.jpg)
Server requirements (as of Wordpress 3.2)
• h;p://wordpress.org/about/requirements/–PHP version 5.2.4 or greater–MySQL version 5.0 or greater–Apache is the recommended h;p server
30
![Page 31: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/31.jpg)
LAMP server stack
• LAMP stands for Linux Apache MySql and Php, which, in a nutshell is just all the software that is required to serve your wordpress site.
• http://www.computerguideonline.com/internet/what-lamp-stack
![Page 32: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/32.jpg)
Installing Wordpress on your remote web server
• http://codex.wordpress.org/Installing_WordPress
• 4 main steps are:
1. Download the Wordpress install package, unzip and upload to your web server using an FTP client
2. Create a new MySql database
3. Edit the wp-config.php file
4. Create an administrator account and start using wordpress!
![Page 33: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/33.jpg)
1. Install the Wordpress package
• http://wordpress.org/download/
![Page 34: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/34.jpg)
Extract
![Page 35: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/35.jpg)
Upload to web server
![Page 36: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/36.jpg)
2. Create the Database
• When you set up your web hosting, you should have been given a url and login details to a web hosting control panel, such as cPanel. This interface will allow you to create and manage MySql databases (if you’re lucky, they might even have a 1-step automated Wordpress install feature).
• http://www.cpanel.net/media/tutorials/addmysql.htm
![Page 37: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/37.jpg)
![Page 38: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/38.jpg)
![Page 39: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/39.jpg)
![Page 40: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/40.jpg)
![Page 41: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/41.jpg)
![Page 42: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/42.jpg)
3. Edit the wp-config.php file
• The wordpress directory you uploaded to your web server will contain a file called wp-config-sample.php.
• You need to edit this file and then re-upload it to your server with the name wp-config.php (lose the -sample part).
![Page 43: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/43.jpg)
![Page 44: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/44.jpg)
4. Create an administrator account for your wordpress site
![Page 45: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/45.jpg)
Wordpress interfaces
• Wordpress interfaces can be divided into the admin interfaces and the public interfaces. We might also refer to these as the backend and frontend interfaces respectively.
![Page 46: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/46.jpg)
Admin/Backend Interface
![Page 47: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/47.jpg)
Admin/Backend Interface
• This is where you do all your Content Management
• editing posts, moderating comments, installing plugins and themes, managing user accounts etc.
• requires a login which you setup during installation.
• accessible at www.yourwordpresssite.com/wp-admin
• http://codex.wordpress.org/Administration_Screens#Dashboard
![Page 48: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/48.jpg)
Public/Frontend Interface
![Page 49: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/49.jpg)
Public/Frontend Interface
• This is what visitors to the site will see when they go to your url.
• You will want to check what the site looks like after making changes to the appearance or the content.
![Page 50: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/50.jpg)
Wordpress themes
•Wordpress can install themes to change the “look and feel” of the site.• h;p://wordpress.org/extend/themes/• Your first assignment is to create your own wordpress theme which uniquely services the content and purpose of your site.
50
![Page 51: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/51.jpg)
Wordpress themes admin interface
51
![Page 52: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/52.jpg)
Wordpress themes directory
• h;p://wordpress.org/extend/themes/52
![Page 53: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/53.jpg)
Using a pre-‐made theme
• Advantages– quick & easy– plenty of well-‐made free themes– can modify to suit your own needs
• Disadvantages– less unique– generic -‐ so not made with your unique content in mind– depending on how much customisa4on you do, it can actually end up taking you longer and cos4ng more than doing your own from scratch
53
![Page 54: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/54.jpg)
Crea4ng 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!
54
![Page 55: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/55.jpg)
Anatomy of a Wordpress theme
• wordpress themes are installed to the wp-‐content/themes directory
55
![Page 56: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/56.jpg)
Anatomy of a Wordpress theme
• consist of a collec4on of php files as well as one or more css files and associated resources (e.g. imagery, javascript files etc.).
56
![Page 57: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/57.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
57
![Page 58: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/58.jpg)
Template tags
•Wordpress uses it’s own php func4ons called template tags to output informa4on 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 whithin the <4tle> html element. • These handy func4ons save us from wri4ng a lot of extra php code.
58
![Page 59: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/59.jpg)
header.php template file
59
view-‐source in the browser
![Page 60: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/60.jpg)
So where do we find out what data wordpress can retrieve and what php code retrieves it?
• The wordpress codex–h;p://codex.wordpress.org/Template_Tags–h;p://codex.wordpress.org/Func4on_Reference/bloginfo
• Look at other themes• google it– e.g. h;p://www.google.com.au/search?hl=en&qscrl=1&q=wordpress+display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai=
60
![Page 61: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/61.jpg)
Anatomy of a Wordpress theme
• wordpress page structure can be logically sec4oned 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 par4cular names like header.php, footer.php, sidebar.php etc).• each block (file) can be included and reused in mul4ple page templates using template tags like <?php get_header(); ?>
61
![Page 62: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/62.jpg)
Anatomy of a Wordpress theme
62
![Page 63: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/63.jpg)
Anatomy of a Wordpress theme
63h;p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
![Page 64: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/64.jpg)
Anatomy of a Wordpress theme
64h;p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
default template for a single post -‐ single.php
![Page 65: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/65.jpg)
Template Hierarchy
65
h;p://codex.wordpress.org/Template_Hierarchy
![Page 66: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/66.jpg)
Anatomy of a Wordpress theme
• Use as much or as li;le of the template hierarchy as your site requires.• lets look at some of the most common template files...
66
![Page 67: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/67.jpg)
header.php
• usually contains the doctype, metadata and <head> sec4on of the html document• may contain the top naviga4on• include the header in other template files to avoid duplica4ng the code it contains with <?php get_header(); ?>
67
![Page 68: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/68.jpg)
footer.php
• anything you would normally put in a common page footer. • include the footer in other template files to avoid duplica4ng the code it contains with <?php get_footer(); ?>
68
![Page 69: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/69.jpg)
sidebar.php
• commonly contains:– naviga4on (main and/or subnav)– links (internal and external)– searchform– widge4sed plugins that can be added and removed through the administrator interface (dashboard)
• include the sidebar in other template files with <?php get_sidebar( $name ); ?>
69
![Page 70: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/70.jpg)
sidebar -‐ widgets
70
![Page 71: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/71.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
71
![Page 72: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/72.jpg)
index.php
• default frontpage• usually displays excerpts of recent posts• use the wordpress loop to ouput posts– h;p://codex.wordpress.org/The_Loop
• usually includes the header, footer and sidebar template files
72
![Page 73: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/73.jpg)
single.php
• displays the en4re contents of a single post• may display comments if enabled• usually includes header and footer template files
73
![Page 74: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/74.jpg)
page.php
• displays the contents of a wordpress page content item• may display comments if enabled• usually includes header and footer template files
74
![Page 75: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/75.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 naviga4on menu that links to various categories as a way of sec4oning your site content.– e.g. h;p://www.smashingmagazine.com/
75
![Page 76: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/76.jpg)
funcMons.php
• the func4ons 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 func4ons that can be used by any other template files.
76
![Page 77: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/77.jpg)
Anatomy of a Wordpress theme
• for a more detailed and complete list of template files see the wordpress codex, par4cularly:– h;p://codex.wordpress.org/Stepping_Into_Templates– h;p://codex.wordpress.org/Theme_Development– h;p://codex.wordpress.org/Site_Architecture_1.5– h;p://codex.wordpress.org/Template_Hierarchy
• for a complete list of wordpress func4ons and template tags (the bits of php you use to get stuff from the database) see the following:– h;p://codex.wordpress.org/Func4on_Reference– h;p://codex.wordpress.org/Template_Tags
77
![Page 78: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/78.jpg)
NavigaMon 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 naviga4on menu.– h;p://codex.wordpress.org/Func4on_Reference/wp_list_pages– h;p://codex.wordpress.org/Template_Tags/wp_list_categories
• CSS lists -‐ h;p://css.maxdesign.com.au/listama4c/
78
![Page 79: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/79.jpg)
So what about the CSS?
• This is probably the least different part of developing a wordpress theme compared with a sta4c website.• The style.css (or whatever you want to call it) sits in the theme directory and is usually added to the header.php with a standard link tag, but with a wordpress func4on 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 inspec4on tool -‐ it is even more of a godsend when working with dynamic websites.
79
![Page 80: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/80.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 informa4on about the theme in the administrator interface.
80
![Page 81: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/81.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
81
![Page 82: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/82.jpg)
Installing the theme
• installing the theme is simply a ma;er of puong the theme folder in the wp-‐content/themes directory and ac4va4ng it through the wordpress admin interface.
82
![Page 83: Cms & wordpress theme development 2011](https://reader033.fdocuments.net/reader033/viewer/2022052823/5554ec2eb4c905bb2a8b4af1/html5/thumbnails/83.jpg)
Wordpress theme development = all your usual staMc-‐web design principles plus the power of the
dynamic web!
83