Design in WordPress: Three files, unlimited layouts #wcstl

67 %
33 %
Information about Design in WordPress: Three files, unlimited layouts #wcstl

Published on March 1, 2014

Author: marybaum4



In WordPress, doing creative things with design can seem like a job for a coding superstar. But it's not - you just need to be willing to cut, paste and edit three files. Do that, and you can make a WordPress site look like anything you want!

Three files, unlimited designs: Make your site look like anything in Genesis or Underscores.

30 years a designer. My firm: Marginhancers. Site = brand foundation. Marketing : revenue as brand : margin.

Are you too old to learn to code?

Who’s here?

What does a WP site look like?

Some themes will do it for us.

Styling goes into themes. Functionality goes into plugins.

Let’s roll our own!

What’s a framework?

Two meanings: A drop-in code library that [helps us develop] a theme. A standalone base/starter theme that [we can either fork into another theme, or use as a] parent theme template.

The way I think of them: Bland-looking parent themes that actually do have most of the styles defined. We override with our designs - in child themes. Some, like Genesis, have a bunch of child themes you can buy and use – or even download for free.






But mostly, frameworks give us secret superpowers.

A good framework is consistent.

Layout flexibility = control (widgets + markup).

Three files. template.php functions.php style.css

Home pages. home.php index.php front-page.php page_funky_layout.php

Three files. template.php functions.php style.css


The Underscores demo.

And undressed.

From two widgets to three.

All lined up.

And dressed to play!

Let’s start by making the widget areas.




“If you don’t know where you’re going, chances are you’ll end up somewhere else.”
 – Yogi Berra

The Genesis default.

The visual reference.

and move.

Underscores: Widgeted area with markup.



Widgets panel.

Things we didn’t cover, but can.


Why do I self-host my type?

Choosing faces that work together.

Laying out the header. Different in the two frameworks. Especially since I made different aesthetic choices: buttons in Underscores, sticky menu in Genesis.

The phone versions.

A formal Best Practices workflow:

Planning: Strategy, design. Message strategy/creative brief. Visual texture. PSD mockup mood board, Style Tiles, whatever.

From visuals to code. CSS defaults. Colors 320 and up, Icons Foundation, Buttons Bootstrap … Form fields Elements: And more. Type



14 - Thanks!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Site Design and Layout « WordPress Codex

Site Design and Layout. ... Customizing Template Files; WordPress Site Reviews; ... Working with WordPress; Design and Layout; Advanced Topics;
Read more

WordPress › Theme Directory « Free WordPress Themes

Search for: Showcase; Themes. Plugins; Mobile; ... Fixed Layout; Fluid Layout ... Two Columns; Three Columns; Four Columns; Left Sidebar ...
Read more

Ultra Theme - Drag & Drop WordPress Themes • Themify

The most powerful & flexible WordPress theme created by Themify, ... Files. Photoshop file is the design mockup used by ... Unlimited Layouts
Read more

Video WordPress Theme - Video Post by MagNyus - YouTube

Single Wordpress Theme, with 17 Main Layouts + Thousands Possibilities ... Allows You Create Unlimited Layouts ... You can upload this file as wordpress ...
Read more

Theme Showcase - WordPress Themes for Blogs at

Here you can browse and search all WordPress themes available on to ... Three Columns; Four Columns ... Left Sidebar; Right Sidebar; Fixed ...
Read more

BeTheme - Responsive Multi-Purpose WordPress Theme ...

... Responsive Multi-Purpose WordPress Theme $59. ... unlimited layouts for pages; ... with included .po /.mo files or our built-in translator;
Read more

CSS « WordPress Codex

... style.css file within each Theme folder. WordPress ... WordPress 2.6). Three additional CSS ... design in WordPress. FAQ Layout and Design; CSS ...
Read more

Custom Backgrounds — Support —

What a statement a custom background image or color can make! The majority of our themes at allow you to customize the background of your ...
Read more

WordPress › Theme Directory « Free WordPress Themes

Layout. Fixed Layout; Fluid ... Responsive Layout; One Column; Two Columns; Three Columns; Four ... Church WordPress theme is a Responsive HTML5 Omega ...
Read more