Formula UCLan – Website Coding

I have decided to use WordPress to run the Formula UCLan website. This gives me the user-friendly backend that a Content Management System (CMS) provides so that the content can be updated by the client easily, much like a blog but also the power to completely customise the design through PHP and CSS. I have decided to hand-code the custom theme for the UCLan website from scratch in order to learn more about design for web. I have been using 'How To Be A Rockstar WordPress Designer' by Rockable Press as a tutorial book to learn how to code for WordPress. http://rockablepress.com/books/rockstar-wordpress-designer/

Setting Up The PHP Document

The PHP document forms the framework of the page. It tells WordPress what data to pull from the server to where on the page and begins to provide the basic structure.

The basic PHP document Dreamweaver creates for you:

A couple lines of meta code to define the content type to WordPress:

Adding the code for pulling the blog title in:

Code to define where the CSS document is on the server so the styling can be applied (when coded):

A URL to the custom 'favicon' (a little icon I designed for the site based on the team's alternate rose logo to site in the top of the browser bar):

Code for pulling the 'head' section of our WordPress site:

And some formatting of the complete section (just for my own readability of the document, for good practice):

Basic code for the 'body' section:

Code to pull in the menu bar, logo and header background (thick underline) inserted into the 'body' section:

Code to tell wordpress to pull the 'posts' or in this case page content into the page:

And code for the footer with a link to my site for design credits:

Setting Up The CSS Document

After some initial PHP I am going to set the CSS document up that will apply the style I have designed to the information brought in by the PHP document.

The basic CSS document Dreamweaver creates:

Sample description code that is usually found at the top of a CSS document, crediting the author of the code, etc – good practice to have in case anyone rips the code from your site:

Corrected for the UCLan site and myself:

The basic structure of the CSS document, but without any styles defined yet:

Below is how the website looks so far, with just the PHP document pulling in the content without any styling: