WordPress Theme Development Using a Responsive Theme Framework

WordPress Theme Development Using a Single Mobile Responsive Framework

Many people approach WordPress website development by using pre-styled premium themes. The pitfall of these themes is that they are not very easy to modify for your own custom look and have either a very limited feature set or a large feature set that is not very flexible. Premium themes work okay for quick, inexpensive websites. However, those of use who build websites for higher-end clients often need to do a LOT of customizations as we work with a designer or design firm to create a completely custom look for each client.

Picking one theme for your WordPress theme development and learning it well allows you to more rapidly build reliable websites time and time again. You do not have to learn a new WordPress theme each time you build a new website.

What are the differences between various WordPress theme frameworks for development?

I have worked with Genesis (Studio Press themes) as well as Thesis. I like Genesis a lot more than Thesis for too many reasons to go into here, but like Thesis, Genesis’ theme files are not user friendly, requiring all HTML customizations to happen vis a vis  “action hooks.” While action hooks are useful, they can be frustrating if they keep you from readily accessing the HTML structure of the site via the theme files themselves.

For example, in the Genesis framework, the page.php template contains one line of code “genesis();” – that’s it!!! What the heck does that mean? It is a function that outputs all the HTML for the page, but who wants to read functions? By contrast, the theme framework I use called WP Jump Start has templates that contain actual HTML, very much like the TwentySomething (default) themes by WordPress.org. You can actually READ the WP Jump Start theme like you would read a book. See screenshots below for examples:

Genesis Page Template

Jump Start Page Template

Using a WordPress theme framework based on Twitter Bootstrap

WP Jump Start has the following features that make it unique among themes and theme frameworks.

• Accessible HTML code making it easier to customize content areas
• Flexible widget areas  to allow you to create custom sidebars and other widget areas throughout the site
• Optional sliders including Nivo, Flexslider, and 3D Carousel
• Responsive lightbox using Magnifipop
• Sidebar templates (left, right, dual, full width)
• Custom layout builder (to create your own custom home page and portfolio or magazine-style layouts through a drag-and-drop interface)
• Built on Twitter Bootstrap for responsive HTML and CSS and many other cool Javascript features (like toggles, accordions, pop up boxes, and more!)
• Child themes with most of the CSS selectors defined that you’ll want to modify
• Shortcodes for almost everything you need from buttons to post grids
• Great developer and end-user documentation, including dozens of helpful videos
• Excellent support and continuous updates

View the WP Jump Start Demo to see examples and documentation of many of these features.

Getting started with WP Jump Start, a mobile-responsive WordPress framework based on Twitter Bootstrap

First, purchase the WP Jump Start theme and start to play around with all end-user features.

One important thing to understand is how a child theme works. Follow the tutorial from the above documentation to install first the Jump Start “parent theme” then the Jump Start “child theme” of your choice. You will only Activate the child theme.

The child theme has a stylesheet called style.css which you can edit via Appearance > Editor. I usually advise people to NOT edit their stylesheet here as it doesn’t provide many helpful styling tips for modifying your theme as would a code editor like Coda or Dreamweaver, but it will give you an idea of some styles you can change and give you a chance to start playing with the theme.

Becoming proficient at WordPress theme development

If you’d like to learn more about how to work with Jump Start, I teach a six-week, 36-hour theme customization course in Boulder and Longmont, Colorado.

The course includes access to an exclusive website for students containing code snippets and many step-by-step tutorials and resources. After the course, all students are invited to participate in a monthly meet up group at Boulder Digital Arts to discuss how to do advanced customizations with Jump Start as well as general best practices with web design, maintenance, and SEO. I’ve also created a private Google Group for past students to email each other with questions.

WordPress Theme Development Courses:

Dates: To Be Announced for Summer and Fall 2015.
Location: Boulder Digital Arts
BDA Members: $1,150.00
Non-Members: $1,250.00
Discount Code for 10% off: Bowman2015
Register: http://boulderdigitalarts.com/training/details.php?offering=409&source=Angela