Embed Size (px)
Citation preview
Why CMS? (Content Management Systems)&
Wordpress theme development
• first, a quick recap...
Web development trends
• More content
• More frequently (up-to-date and on-demand)
• From more sources (crowd sourcing, mashups etc)
• More roles/contributors.
• As a web designer you need to at least have an understanding of all these areas and how they fit together.
Dynamic Website Model
• Website content is stored in a database (and/or other external sources) and assembled with markup and output by a web server script/application.
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 of tasks
Web Content Management Systems (WCMS)
• 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)
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?
Disadvantages of using a CMS
• Upgrading to newer versions of the CMS may break things.
• Migrating content to a different CMS may be difficult or infeasible
• 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?
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.
• If the design and/or architecture of your website is highly unique/specialised then attempting to make it work with an out-of-the-box solution will be like forcing a square peg in a round hole.
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 accounts and privileges.
• Automation of processes (e.g. publishing, creating users, menu creation etc.)
• Common architecture means development of reusable plugins, templates/themes etc
Some Common WCMS features
• Automated Templates
• Access Control
• Scalable Feature Sets
• Web Standards Upgrades
• Delegation and Collaboration
• Document Workflow Management
• Content Syndication
http://en.wikipedia.org/wiki/Web_content_management_system#Capabilities
Content Management Confusion
• So how many WCMS exist?
• http://en.wikipedia.org/wiki/List_of_content_management_systems
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)
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
Which CMS!?
Complexity
Versa4lity
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
• WordPress is used by 19.0% of all the websites, that is a content management system market share of 57.1% - http://w3techs.com/technologies/overview/content_management/all
• 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
• 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?
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/
Example: Rebranding using the custom login plugin
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.
Flickout.com
LucasHirata.com
More Wordpress sites that don’t look like blogs
• hAp://designtutorials4u.com/30-‐crea4ve-‐wordpress-‐sites-‐that-‐dont-‐look-‐like-‐blogs/• hAp://blogsessive.com/blogging-‐tools/10-‐beau4ful-‐wordpress-‐websites/• hAp://pelfusion.com/inspira4on/30-‐wordpress-‐based-‐websites-‐that-‐dont-‐look-‐like-‐blogs/• hAp://www.websitetology.com/?p=244
24
Server requirements (as of Wordpress 3.2)
• hAp://wordpress.org/about/requirements/–PHP version 5.2.4 or greater–MySQL version 5.0 or greater–Apache is the recommended hAp server
25
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
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!
1. Install the Wordpress package
• http://wordpress.org/download/
Extract
Upload to web server
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
PHPMyAdmin
• A common web interface for administering databases
• If your hosting doesn’t have a database setup ‘wizard’ you can set up the database with this
• PHPMyAdmin is what you will need to use if you are using the CIF hosting
• https://phpmyadmin.ci.qut.edu.au/
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).
4. Create an administrator account for your wordpress site
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.
Admin/Backend Interface
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
Public/Frontend Interface
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.
Wordpress themes
• Wordpress can install themes to change the “look and feel” of the site.• hAp://wordpress.org/extend/themes/• Your first assignment is to create your own wordpress theme which uniquely services the content and purpose of your site.
46
Wordpress themes admin interface
47
Wordpress themes directory
• hAp://wordpress.org/extend/themes/48
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 aesthe4c 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
49
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!
50
Anatomy of a Wordpress theme
• wordpress themes are installed to the wp-‐content/themes directory
51
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.).
52
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
53
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 within the <4tle> html element. • These handy func4ons save us from wri4ng a lot of extra php code.
54
header.php template file
55
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–hAp://codex.wordpress.org/Template_Tags–hAp://codex.wordpress.org/Func4on_Reference/bloginfo
• Look at other themes• google it– e.g. hAp://www.google.com.au/search?hl=en&qscrl=1&q=wordpress+display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai=
56
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(); ?>
57
Anatomy of a Wordpress theme
58
Anatomy of a Wordpress theme
59hAp://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
Anatomy of a Wordpress theme
60hAp://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
default template for a single post -‐ single.php
Template Hierarchy
61
hAp://codex.wordpress.org/Template_Hierarchy
Anatomy of a Wordpress theme
• Use as much or as liAle of the template hierarchy as your site requires.• lets look at some of the most common template files...
62
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(); ?>
63
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(); ?>
64
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 ); ?>
65
sidebar -‐ widgets
66
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
67
index.php
• default frontpage• usually displays excerpts of recent posts• use the wordpress loop to ouput posts– hAp://codex.wordpress.org/The_Loop
• usually includes the header, footer and sidebar template files
68
single.php
• displays the en4re contents of a single post• may display comments if enabled• usually includes header and footer template files
69
page.php
• displays the contents of a wordpress page content item• may display comments if enabled• usually includes header and footer template files
70
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. hAp://www.smashingmagazine.com/
71
func4ons.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.• it is automa4cally “included” by Wordpress (so you don’t need to use include or require statements before accessing it from another template file)
72
Anatomy of a Wordpress theme
• for a more detailed and complete list of template files see the Wordpress codex, par4cularly:– hAp://codex.wordpress.org/Stepping_Into_Templates– hAp://codex.wordpress.org/Theme_Development– hAp://codex.wordpress.org/Site_Architecture_1.5– hAp://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:– hAp://codex.wordpress.org/Func4on_Reference– hAp://codex.wordpress.org/Template_Tags
73
Naviga4on 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.– hAp://codex.wordpress.org/Func4on_Reference/wp_list_pages– hAp://codex.wordpress.org/Template_Tags/wp_list_categories
• CSS lists -‐ hAp://css.maxdesign.com.au/listama4c/
74
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 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 useful when working with dynamic websites.
75
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.
76
Installing the theme
• it also looks for a file called screenshot.png in the template directory to provide a preview thumbnail of the theme
77
Installing the theme
• installing the theme is simply a maAer of putng the theme folder in the wp-‐content/themes directory and ac4va4ng it through the wordpress admin interface.
78
Wordpress theme development = all your usual sta4c-‐web design principles plus the power of the
dynamic web!
79
