Cms & wordpress theme development 2011
2 likes2,020 views
This document discusses content management systems (CMS) and why WordPress is a popular choice. It notes that more websites now feature dynamic, frequently updated content from multiple sources. CMS allow decentralized updating and reuse of common elements. WordPress is recommended for beginners due to its simplicity yet expandability through plugins. While initially a blogging platform, WordPress can be used to build many types of websites through themes. It has a large community and runs on common, well-supported technology.
Cms & wordpress theme development 2011
- 1. Why CMS? (Content Management Systems) & Wordpress theme development
- 2. • first, a quick recap...
- 3. So what are the trends? • More content • More frequently (up-to-date and on- demand) • From more sources (crowd sourcing, mashups etc)
- 4. 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.
- 5. So what are the trends? • Moving away from a static web towards a dynamic web.
- 6. Static vs Dynamic Website
- 7. 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”
- 8. 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.
- 9. 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.
- 10. 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
- 11. 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.
- 12. 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)
- 13. 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
- 14. 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?
- 15. 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.
- 16. Common WCMS features • Automated Templates • Easily Editable Content • Scalable Feature Sets • Web Standards Upgrades • Workflow Management • Delegation • Document Management • Content Virtualisation
- 17. Content Management Confusion • So how many WCMS exist? • http://en.wikipedia.org/wiki/ List_of_content_management_systems • Why are there so many?
- 18. 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)
- 19. 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-
- 20. 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
- 21. Which CMS!? Complexity Versa4lity
- 22. 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
- 23. • 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?
- 24. 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/
- 25. Example: Rebranding using the custom login plugin
- 26. 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.
- 27. Flickout.com
- 28. LucasHirata.com
- 29. 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
- 30. 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
- 31. 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
- 32. 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!
- 33. 1. Install the Wordpress package • http://wordpress.org/download/
- 34. Extract
- 35. Upload to web server
- 36. 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
- 42. 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).
- 44. 4. Create an administrator account for your wordpress site
- 45. 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.
- 47. 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
- 49. 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.
- 50. 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
- 51. Wordpress themes admin interface 51
- 52. Wordpress themes directory • h;p://wordpress.org/extend/themes/ 52
- 53. 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
- 54. 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
- 55. Anatomy of a Wordpress theme • wordpress themes are installed to the wp-‐ content/themes directory 55
- 56. 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
- 57. 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
- 58. 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
- 59. header.php template file view-‐source in the browser 59
- 60. 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
- 61. 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
- 62. Anatomy of a Wordpress theme 62
- 63. Anatomy of a Wordpress theme h;p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/ 63
- 64. Anatomy of a Wordpress theme default template for a single post -‐ single.php h;p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/ 64
- 66. 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
- 67. 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
- 68. 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
- 69. 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
- 70. sidebar -‐ widgets 70
- 71. 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
- 72. 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
- 73. single.php • displays the en4re contents of a single post • may display comments if enabled • usually includes header and footer template files 73
- 74. page.php • displays the contents of a wordpress page content item • may display comments if enabled • usually includes header and footer template files 74
- 75. 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
- 76. 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
- 77. 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
- 78. 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
- 79. 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
- 80. 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
- 81. 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
- 82. 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
- 83. Wordpress theme development = all your usual staMc-‐web design principles plus the power of the dynamic web! 83