Content Management Systems (CMS) & Wordpress theme development
4 likes2,973 views
- WordPress is a popular content management system (CMS) that can be used to manage websites with frequently updated content from multiple sources. It allows both technical and non-technical users to manage content. - While WordPress started as a blogging platform, it has evolved into a full-fledged CMS through the use of plugins and themes. Many websites built with WordPress do not look like blogs. - Setting up WordPress involves downloading and installing the WordPress files, creating a database, editing configuration files, and creating an administrator account. Key interfaces include the public interface for visitors and the admin interface for content management.
Content Management Systems (CMS) & Wordpress theme development
- 1. Why CMS? (Content Management Systems) & Wordpress theme development
- 2. • first, a quick recap...
- 3. Web development trends • More content • More frequently (up-to-date and on-demand) • From more sources (crowd sourcing, mashups etc)
- 4. • More roles/contributors. • As a web designer you need to at least have an understanding of all these areas and how they fit together.
- 5. 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.
- 6. 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
- 7. 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)
- 8. 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?
- 9. 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?
- 10. 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.
- 11. 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
- 12. 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
- 13. Content Management Confusion • So how many WCMS exist? • http://en.wikipedia.org/wiki/ List_of_content_management_systems
- 14. 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)
- 15. 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
- 17. 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
- 18. • 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?
- 19. 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/
- 20. Example: Rebranding using the custom login plugin
- 21. 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.
- 22. Flickout.com
- 23. LucasHirata.com
- 24. 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
- 25. 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
- 26. 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
- 27. 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!
- 28. 1. Install the Wordpress package • http://wordpress.org/download/
- 29. Extract
- 30. Upload to web server
- 31. 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
- 37. 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/
- 38. 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).
- 40. 4. Create an administrator account for your wordpress site
- 41. 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.
- 43. 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
- 45. 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.
- 46. 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
- 47. Wordpress themes admin interface 47
- 48. Wordpress themes directory • hAp://wordpress.org/extend/themes/ 48
- 49. 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
- 50. 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
- 51. Anatomy of a Wordpress theme • wordpress themes are installed to the wp-‐content/themes directory 51
- 52. 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
- 53. 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
- 54. 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
- 55. header.php template file 55 view-‐source in the browser
- 56. 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
- 57. 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
- 58. Anatomy of a Wordpress theme 58
- 59. Anatomy of a Wordpress theme 59 hAp://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/
- 60. Anatomy of a Wordpress theme 60 hAp://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/ default template for a single post -‐ single.php
- 62. 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
- 63. 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
- 64. 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
- 65. 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
- 67. 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
- 68. 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
- 69. single.php • displays the en4re contents of a single post • may display comments if enabled • usually includes header and footer template files 69
- 70. page.php • displays the contents of a wordpress page content item • may display comments if enabled • usually includes header and footer template files 70
- 71. 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
- 72. 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
- 73. 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
- 74. 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
- 75. 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
- 76. 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
- 77. 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
- 78. 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
- 79. Wordpress theme development = all your usual sta4c-‐web design principles plus the power of the dynamic web! 79