Responsive WordPress Workshop
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
- Brackets or a similar open source code editor installed
- Adobe Photoshop installed
- A web host preferably with a single click WordPress installation such as GoDaddy and Dreamhost
- Firefox web browser and Firebug Extension
- An FTP client such as FileZilla, SmartFTP or CoreFTP.
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
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
Hi will you be doing any more of these courses in 2015? In sydney
Hi Amanda, Thanks for your enquiry. Yes I will be running more WordPress workshops in 2015. Please watch this space or follow me on Twitter for course updates and notifications https://twitter.com/philbossdesign. Cheers, Phillip
Hey Philip,
Do you conduct online wordpress workshop instead?
For those who can’t attend the live workshop?
Cheers,
Robin Ooi