Client Development

Client Development
The Twentytwelve Responsive Template

Responsive Design

As it was decided to create a responsive website for Shambarber I opted to use the responsive twentytwelve template that comes with the Wordpress install as a base to work from.


Client Development
Editing the CSS in the dashboard editor

By editing the templates stylesheet within the CSS editor of the dashboard I was able to style the website inline with my design plan.


I created a few variations of the page template to suit my planned layout design. These were a mixture of full width pages and two column page templates.


Once these were created I was able to select the required custom template from the page attributes when creating a page in the dashboard.


Client Development
Creating custom page templates

By adding custom sidebars within the page functions (functions.php) I was able to add new sidebar widgets to the page templates I had created. This was a way of placing custom menus within the sidebars of the main pages.


After adding the code to the widget function I could now see the new sidebars within the widgets page and could drag new widget items into these sidebars.


Client Development
Creating custom widget areas and adding widgets.

I created a custom menu for the main pages, these would allow for navigation into the secondary pages. I also edited the menu items for the main top menu.


Client Development
Creating custom menus

After presenting my design to the group I decided I would have to add a few extra features such as the shop phone number at the top of every page.


Client Development
The final Shambarber responsive website viewed on different devices

The Shambarber website was starting to come together and begining to look exactly as I had planned.


Although I didn't get to finish and test the whole website for Shambarber you can view how far I got with the project here.


Main Portfolio Page