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.
- Considerations when designing for mobile
- Media queries and viewport detection scripts
- Retina optimised image techniques
- Mobile navigation
|1100-1200: Responsive Design Concepts [Presentation]|
|1200-1230: HTML/CSS Refresher|
|1230-1300: Creating a Flexible/Scalable Layout [Activity One]|
|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.
- A layered Photoshop User Interface
- A cross device consistent website
- A scalable mobile optimised website
|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|
|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.
- WordPress template hierarchy
- WordPress theme and file structure
- The WordPress loop and common template tags
- Theme upload, activation and configuration
|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|
|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.