WordPress Theme Design and CSS Basics

Tomorrow I’ll be tutoring at Metro Screen for the students enrolled in the Advanced Diploma in Screen and Media (CUF60107). I’ll be focusing on the design section of the assessment brief for the Media Rich Blog assessment:

• Strong, eye-catching and appropriate post and page titles.
• Self branding, such as a header image created using image processing tool, e.g. PhotoShop, and uploaded correctly by yourself.
• General customisation of the theme of the blog appropriately matching the branding and subject matter.
• A range of ‘pages’ (at least 4) that provide explanations or extra material around the chronological posts – these will include about, definition(s), a page about the customisation you have performed on the blog overall and an article (essay) page.

[Note: you may use pre-existing themes, but you must demonstrate in one of your posts that you have significantly customised the theme. You may customise the theme by detailing either the CSS method used and/or utilising the 3rd party theme’s own configuration panel.]

Here are a few things I’ll be mentioning during the session:

It’s important to understand what a Theme does for a WordPress Website as well as the three ‘categories’ of Themes.

To learn more about CSS take a look at w3schools.com and CSS Basics. For a demonstration of what changing CSS can do to a Page see Zen Garden.

Some awesome free tools that greatly assist with WordPress Website design include: Firebug (for Firefox),Web Developer (extension for Firefox or Chrome), Notepad++ (great for editing CSS, PHP, JavaScript etc.) and Filezilla (the best FTP client around and available for Windows, Linux and Mac).

Two simply incredible and totally free Themes for WP that allow for mass customization without touching underlying code or CSS; Suffusion and Constructor.

Some cool Plugins that assist with design/CSS:

• Compression WP: Compress the size of CSS, HTML etc. to improve Page load speed.
• Contact Form 7: Powerful Contact Form Plugin with many options to change the look of forms.
• TinyMCE Advanced: Many great CSS Tools to add to the native WordPress WYSIWYG editor.
• WP Google Fonts: Use free Webfonts on your WordPress Site.
• WP-Table Reloaded: Make tables look the way you want.
• WP-Touch: Helps your Site look better on mobile devices.

And here is a task that will assist in reinforcing WordPress essentials and some design aspects:

1. Access a test WordPress Website (I’ll give students access to test WordPress Sites).
2. Install and activate the Constructor Theme.
3. Download to your computer and then install this data into the test Website accepting any defaults during import but ensuring that attachments are imported (this data will assist in displaying most of the design elements on the test Website, see https://codex.wordpress.org/Theme_Unit_Test for more).
4. Install and activate the WP Google Fonts Plugin.
5. In the Google Fonts settings assign the ‘Crafty Girls’ font to All (Body Tag).
6. In the Google Fonts settings assign the ‘Raleway’ font to all the headline element.
7. Notice how the fonts on the Website have been replaced.

The aim of the exercise is to show that design doesn’t necessarily mean that any CSS must be amended!