Responsive WordPress Workshop

2 May 2015
  • Phillip Peet
  • Phillip Peet

Powering over 60 million websites on the Internet WordPress is hands down the most popular content management system on the market today. Coinciding with the growth of WordPress is the rapid advancements in mobile technology and accessibility to the World Wide Web. If you mix these two together and throw in some creative design you open up a market for responsive WordPress theme development.

This workshop series commencing on Saturday 2nd May 2015 at General Assembly in Sydney is ideal for web designers who create website layouts from scratch and want to be able to offer WordPress as a content management solution. It may also appeal if you are interested in building and selling custom WordPress themes.

Spanning over three days you will initially cover the core concepts and techniques to be able to create a scalable device consistent website. From there you will take a Photoshop website concept and turn it into a mobile responsive HTML/CSS template. Lastly you will explore WordPress template files and theme hierarchy concepts before converting your static web pages into a dynamic custom WordPress website.

For more information or to enrol simply visit the Build a Responsive WordPress Website in 3 Days workshop page on General Assembly’s website. Tickets to individual days can be purchased for $180 or at a discounted bundled rate of $480 for all three days.

 

Day One: Responsive Web Design for Mobile and Desktop

Saturday 2 May 2015 10am – 5pm

In this first workshop session you will cover the theory behind designing mobile friendly websites. You will look at the key HTML and CSS elements, practices and techniques required to integrate and support scalable design.

Takeaways

  • Considerations when designing for mobile
  • Media queries and viewport detection scripts
  • Retina optimised image techniques
  • Mobile navigation

Agenda

Morning Session
1000-1100: Introduction/Overview
1100-1200: Responsive Design Concepts [Presentation]
1200-1230: HTML/CSS Refresher
1230-1300: Creating a Flexible/Scalable Layout [Activity One]
Afternoon Session
1400-1500: Creating a Flexible/Scalable Layout [Activity Two]
1500-1530: Adding Viewport Detection and Media Queries
1530-1600: Implementing an Accordion Collapsible Mobile Menu
1600-1700: Inserting Images & Content

 

Day Two: From Photoshop to HTML/CSS

Saturday 9 May 2015 10am – 5pm

There are a distinct number of advantages to designing a website in Photoshop (or similar) prior to coding it: #1. You can work collaboratively on a project allowing a designer to focus on the creative graphics whilst a developer can focus solely on the code; #2. You have a reference that can be used to guide your implementation; #3: It is much easier to have the graphic assets prepared prior to the implementation so that it doesn’t hinder your (a web developer’s) coding or workflow.

Following on from the responsive principles covered in the first session you will prepare a Photoshop user interface for implementation. You will plan and prepare assets, create HTML page structure and apply CSS styles. Using viewport detection, media queries and mobile menu techniques you will optimise the mobile viewing experience.

Takeaways

  • A layered Photoshop User Interface
  • A cross device consistent website
  • A scalable mobile optimised website

Agenda

Morning Session
1000-1030: Analyse Photoshop Layout & Prepare Assets
1030-1130: Plan/Commence HTML Implementation
1130-1200: Convert and Link Font Face Replacements
1200-1300: Apply External CSS and Format your HTML Page

Afternoon Session
1400-1445: Implement/Format Menu System
1445-1530: Add Viewport Detection and Media Queries
1530-1600: Upload and Cross Device Test your Implementation
1600-1700: Implement Internal Layouts

Day Three: Build WordPress Custom Themes

Saturday 16 May 2015 10am – 5pm
As a result of the growing popularity of WordPress and the demand to create beautiful ‘hand crafted’ websites now is the time to learn how to build WordPress themes. In this final workshop session you will have a look under the WordPress bonnet (so to speak) examining the WordPress template hierarchy, template tags and file structures. You will then apply these principles to your website, upload and activate your own custom theme.

Takeaways

  • WordPress template hierarchy
  • WordPress theme and file structure
  • The WordPress loop and common template tags
  • Theme upload, activation and configuration

Agenda

Morning Session
1000-1030: Template Hierarchy and Structure Handouts
1030-1100: Create Theme Folder, Screenshot and add Stylesheet Information
1100-1115: General Blog Configuration [Permalinks, Image Sizes, Static Pages]
1115-1130: Create Key Template Files [index, header, footer]
1130-1200: Add Pages and Implement a Dynamic WordPress Menu
1200-1230: Translate Static Post and Page Content into WordPress
1230-1300: Add Feature Image Support and Insert Loop Code
Afternoon Session
1400-1500: Install & Configure Advanced Custom Fields
1500-1600: Install & Configure Royal Touch Swipe Slider Plugin
1600-1700: Install & Configure Gravity Forms Plugin

 

Prerequisites & Preparation

This is an intermediate level workshop and therefore prior exposure and experience with HTML/CSS code is strongly recommended.

Before attending this workshop please ensure that you have

  1. Brackets or a similar open source code editor installed
  2. Adobe Photoshop installed
  3. A web host preferably with a single click WordPress installation such as GoDaddy and Dreamhost
  4. Firefox web browser and Firebug Extension
  5. An FTP client such as FileZilla, SmartFTP or CoreFTP.

 

5 responses to “Responsive WordPress Workshop”

  1. Max Harrison says:

    Hi Phil!
    Great class over at GA. Was hoping to know when the next responsive wordpress class will begin in November… Can’t wait!
    M

    • admin says:

      Hi Max, Many thanks for that and glad you enjoyed the WordPress course. My next WordPress workshop at General Assembly commences on Saturday 8th November. Bear in mind that this course requires intermediate knowledge of HTML/CSS :) Cheers, Phil

  2. Amanda says:

    Hi will you be doing any more of these courses in 2015? In sydney

  3. Robin Ooi says:

    Hey Philip,

    Do you conduct online wordpress workshop instead?

    For those who can’t attend the live workshop?

    Cheers,
    Robin Ooi

Leave a Reply

Your email address will not be published. Required fields are marked *