Automatic Columns for Widget Areas

In this tutorial, we will cover how to automatically (and responsively) split a widget area into columns. The number of columns will automatically be calculated based on the number of widgets in the widget area. It’s really pretty simple.

Count the widgets

First, let’s start with the function we will use to calculate the number of widgets.

function widget_count( $widget_area_id ) {
	$widget_areas = wp_get_sidebars_widgets();

	if( empty( $widget_areas[$widget_area_id] ) ) {
		return false;
	} else {
		return count( $widget_areas[$widget_area_id] );
	}
}

Display the widget area

Next we need to display the widget area. For this example, we’ll work with a widget area with an ID of “footer”.

Please note: the widget area must be registered elsewhere. I’ve left it out of this tutorial because we’re focusing on the automatic columns, not setting up standard widget areas.

if ( is_active_sidebar( 'footer' ) ) {
	$widget_count = widget_count('footer');
	?>
		<div class="widget-columns widget-count-<?php echo $widget_count; ?>">
			<?php dynamic_sidebar( 'footer' ); ?>
		</div><!--.widget-columns-->
	<?php
}

First we check if the widget area is active, then use the widget_count() function to find the number of widgets in our widget area, and finally use that number in our widget class name.

Style the widget area

Lastly, we need to write the styles that take the class names we created and create a responsive layout.

.widget-columns .widget {
	padding: 0 25px;
}

@media (min-width: 900px) {

	.widget-columns.widget-count-2 .widget,
	.widget-columns.widget-count-4 .widget,
	.widget-columns.widget-count-5 .widget {
		float: left;
		width: 50%;
	}

	.widget-columns.widget-count-3 .widget,
	.widget-columns.widget-count-6 .widget {
		float: left;
		width: 33.333333333%;
	}
	
	.widget-columns.widget-count-4 .widget:nth-child(odd),
	.widget-columns.widget-count-5 .widget:nth-child(odd),
	.widget-columns.widget-count-6 .widget:nth-child(3n+4) {
		clear: left;
	}

	.widget-columns.widget-count-5 .widget:last-child {
		margin-left: 25%;
	}
}

@media (min-width: 1140px) {

	.widget-columns.widget-count-4 .widget {
		float: left;
		width: 25%;
	}

	.widget-columns.widget-count-5 .widget {
		float: left;
		width: 20%;
	}

	.widget-columns.widget-count-6 .widget {
		float: left;
		width: 16.666666667%;
	}

	.widget-columns.widget-count-4 .widget:nth-child(odd),
	.widget-columns.widget-count-5 .widget:nth-child(odd),
	.widget-columns.widget-count-6 .widget:nth-child(3n+4) {
		clear: none;
	}

	.widget-columns.widget-count-5 .widget:nth-child(odd) {
		margin-left: 0;
	}
}

We start by giving every widget some padding so the text doesn’t touch between widgets. We also set box-sizing to border-box so that the padding is included in the calculated width of the element. This allows us to have to 50% wide columns without the padding pushing us over a total width of 100%.

Next we have the styles for tablet screen sizes. For widget areas with 2, 4, and 5 widgets, we create 2 columns by setting the widget width to 50% and floating all widgets to the left. For widget areas with 3 and 6 widgets, we create 3 columns by setting the width to 33.333333333% and once again floating all widgets to the left. At this point, widget areas with 4 or 5 widgets are being displayed in the two column layout and widget areas with 6 widgets are being displayed in the 3 column layout. It’s not until the desktop size that they will get their full number of columns. At the tablet size, we make sure they properly collapse into rows by specifying which widgets must clear the previously floated elements. Finally, we center the last widget when there are 5 widgets in a two column layout.

For desktop screen sizes, we define the 4, 5, and 6 column layouts, remove the clearing rules we used for breaking things into rows at the tablet size, and remove the left margin we used to center the last widget in a widget area with 5 widgets at the tablet size.

And there you have it. Automatically generated columns for widget areas. That wasn’t so bad, was it?

 

A Month of Theme Development

For many years I silently worked on building better WordPress themes. Only a few times did I let the general public know what I was up to. I would usually work hard for a little while, only to get overcome with client work. When client work slowed down, I would start over, improving on where I previously left off.  I can’t even count how many times this has happened over the years. (A few of you may remember the “Rampart” theme I was working on last year. Yes, this is an improvement on that theme, with better code and a better plan).

For the past few months, I’ve been slowly working on a new theme once again. This time, however, I don’t want it to get buried, I don’t want it to get abandoned, I don’t want it to die. So I’ve come up with a plan to make this theme happen. First, let me explain what kind of theme this is, and then I’ll explain my plan.

Longview: a theme for developers only

First of all, I want to be very clear. This is not a theme developed for end users. It will not do everything “with no code needed” and it would fail miserably on ThemeForest. This is a theme for developers who want a theme built with them in mind. A theme that follows best practices and coding standards. A theme that is extensible and well documented. A theme that makes a developer’s life easy.

Here are a few things that make the Longview theme great:

  • Longview is 100% mobile-first responsive.
  • It makes use of modern developer tools such as Grunt and Sass.
  • Every aspect of the theme can be controlled or overridden by a child theme.
  • It supports standard WordPress features such as I18n, custom menus, and featured images.
  • It has 7 different layouts (Content, Full Width Content, Content/Sidebar, Content/Sidebar/Sidebar, Sidebar/Content, Sidebar/Sidebar/Content, and Sidebar/Content/Sidebar).
  • It has 8 widget areas (Main Sidebar, Additional Sidebar, Before Header, Inside Header, After Header, Before Footer, Inside Footer, After Footer).
  • It has 2 built in menu locations (Header and Footer) and supports menus in all widget areas as well.
  • Longview is one of the only themes I know of that takes vertical rhythm into account.

I’ve worked diligently to keep code in it’s most natural position. Almost all theme frameworks targeted at developers have a steep learning curve because they completely reinvent the WordPress theming process. Longview isn’t like that. If you’re familiar with the standard WordPress theming process, you’ll know where to look for things. For example, if you’re looking to modify the single post template, you’ll find the code in single.php. It may look slightly different once you get there, since everything is added via hooks and filters, but you’ll find what you’re looking for in the file where you would expect it.

I don’t have a screenshot of the theme posted yet, but this site is running a slightly modified version of Longview already.

Release Plan

Here’s the idea: I plan on devoting 4hrs/day to improving this theme every weekday for the month of September. At the end of September, I will make this theme available for $250 for a one year license. Yes, that’s at least $50 more than the closest competitor. The goal is to provide enough value to make that price feel like a bargain. For those interested in getting in on the ground floor and helping to shape what this theme becomes, I will be offering licenses for unlimited updates and support for the following prices/quantities:

  • The first 5 theme sales will go for $50
  • The next 10 will be priced at $100
  • When those are sold out, 15 licenses will be available at $150
  • Followed by 20 at $200
  • …and finally 25 at $250

When those are gone (or when September ends) the unlimited updates/support license will be retired and the theme will move to a yearly license. Developers who purchase unlimited licenses will also get access to the private Github repo for the month of September to make updating and collaborating easier for everyone. If things go well, I may keep the repository open longer.

Planned Improvements

The theme is still a work in progress. These are the kinds of things I’d like to improve in the coming month:

  • Further automation with Grunt
  • Modularize styles with Sass
  • Create SassDoc documentation
  • Create PHPDoc documentation
  • Support all available WordPress features (gallery shortcode, custom header, custom background, post formats, etc.)
  • Style the output of popular plugins so they fit in seamlessly
  • Listen to input from other developers and improve the theme accordingly

Note on the last item in that list: If you’re a WordPress developer, I’d REALLY love to hear from you, even if you’re not interested in this particular theme. What do you wish commercial theme companies would do differently? What do you look for in a theme?

More Information

If you have any questions, comments, or suggestions about the upcoming theme, feel free to get a hold of me using the contact form or on twitter.

To be the first to find out when Longview becomes available, sign up for the Theme Foundation newsletter. Thanks guys, talk to you soon!

 

 

Vertical Rhythm and Responsive Typography: A Starting Point

Let me start by pointing out that I am not an expert typographer. In fact, I wouldn’t consider myself a typographer at all. However, as a web developer I deal with typography on a regular basis and do my best to display content in a responsible manner. Today I want to talk about vertical rhythm, baseline grids, and responsive typography. I also want to propose a simple, responsive, baseline grid that can be used to create a consistent vertical rhythm. (more…)

Using Skip to Content Links to Improve WordPress Theme Accessibility

While working on Rampart, my upcoming commercial theme, I began to research the best practices surrounding “Skip to Content” links. If you’re not familiar with skip links, they are simply links that allow site visitors to bypass the site navigation and go directly to the main content of the page. These links are especially useful for people using screen readers or navigating with the keyboard rather than the mouse. Lets take a quick look at the three ways that skip links can be implemented before diving into the code.

(more…)

Using ARIA Landmark Roles to Improve WordPress Theme Accessibility

ARIA landmark roles help screen readers understand the purpose of various sections of a web page. Unfortunately, they seem to be largely neglected in the WordPress community. Adding landmark roles to a theme is relatively simple and I can’t think of a good reason not to include them in every project. Here is a simple breakdown of the ARIA landmark roles and how they should be applied when building WordPress themes. We’ll start with an explanation of each role and then take look at the code involved in adding each role to a theme. (more…)

Rampart: A WordPress Theme for Developers

I’ve been building, modifying, using, and studying WordPress themes for over five years now. I remember watching the release of the first few commercial WordPress themes. As time went on, I ended up working for and with a number of different theme companies. I worked on various client projects as well. I’ve spent countless hours working with themes both good and bad. Now the time has finally come for me to put my experience into the form of a product: the Rampart WordPress theme.

Please note: Rampart will be a commercial theme, and is not available yet. There will be discounts for developers interested in purchasing the theme before it officially launches. To be the first to find out when these deals are available, please sign up for the Theme Foundation newsletter.

A Theme for Developers Only

If you’re not a web developer, you can stop reading now. This theme is not for you. It will not have a thousand theme options, it will not have a slider, and it will not be advertised with the phrase “without any code.”

If you are a web developer, I want to help you build higher quality sites in less time. Here’s the plan… (more…)

Simple CSS Layout with Header on the Left

This is the fifth and final post in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle a layout with the header on the left, instead of across the top. Typically in this type of layout, the navigation is on the left as well. The Medium theme by Okay Themes is a good example of this style of layout.

CSS layout example

(more…)

Simple Three Column CSS Layout (Split Sidebars)

This is the fourth in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle three column layouts with one sidebar on each side of the main content area. Layouts with both sidebars on the same side were covered in the last tutorial. (more…)

Simple Three Column CSS Layout (Sidebars Together)

This is the third in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle three column layouts when both sidebars are on the same side. Sidebars split out on each side of the main content are covered in the next tutorial. (more…)

Simple Two Column CSS Layout

This is the second in a series of posts detailing how to setup basic responsive page structures using CSS. In this post, I will be covering how to handle two column layouts, first with the content on the left and the sidebar on the right and then the other way around. (more…)

Simple Single Column CSS Layout

This is the first in a series of posts detailing how to setup basic responsive page structures using CSS. In this post, I will be covering how to easily put together a single column layout. It’s pretty simple, but I’ll move on to more complex layouts in the next posts.

There are just a few things I want to mention before getting started:

  1. The HTML structure will be coming from the Solum starter theme I released last week. Solum doesn’t contain any layout markup, so it gives a clean starting point.
  2. I will not be including menus in these tutorials. For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.

(more…)

Introducing Solum, a WordPress Starter Theme

As I mentioned a week ago in my New Year post, I’ve been working on a new WordPress starter theme. I know there are plenty of starter themes available already, so I want to spell out my goals for this starter theme clearly.

  1. Do things the WordPress way.
  2. Include only the most necessary components (I know this is vague. Think: no amazing features, almost no styles, etc).
  3. Pass the Theme-Check plugin tests.
  4. Be easily extensible.
  5. Serve as a tool for teaching the proper way to build WordPress themes.
  6. Include comprehensive documentation.

I don’t think I’ve achieved these goals yet, but I’m working on it (although it does pass the Theme-Check tests). If you’d like to check out what’s been done so far, or help Solum reach the goals listed above, check out the Solum Github page.

naming-wordpress-theme-folders-and-files

Guidelines for Naming WordPress Theme Folders and Files

Many posts have been written about the WordPress template hierarchy and the naming conventions associated with it. In order for WordPress to load the right template file at the proper time, certain file names must be used. However, naming WordPress theme folders and files that aren’t part of the template hierarchy is not so straightforward. Today I would like to explain the file structure and folder names in use at Theme Foundation and the reasoning behind them.

naming-wordpress-theme-folders-and-files

File and folder names should be used to clearly identify their contents. I know this should be obvious, because names exist primarily to identify things. However, there have been times when I’ve opened a theme and found that I really have no idea where to begin looking for a particular piece of code. I hope that no one ever feels that way when working with a product I build, so here are the naming conventions I have in place for the themes I create.

(more…)

A New Year Brings New Plans

It’s been 14 months since my first post here on Theme Foundation. I’ve only posted about once a month and this site had been on the back burner most of the time. In the first half of 2014 I want to change all that. Here’s the plan:

  1. Post two helpful tutorials or discussions of relevant topics per week.
  2. Release my first commercial theme before the first of June. (Just in time for BeachPress!)

I’ve been hard at work on a new starter theme and a unique pricing system, but I’m not going to tell you about either of those today. That info will come soon enough. Want to be the first to know when those posts are published? Sign up for the Theme Foundation Newsletter.

A Collection of Controls for the WordPress Theme Customizer

If you’ve worked with WordPress theme customizer before, you know that there are some great controls built into core. However, if you want to extend what the customizer can do, you’ll have to either write your own controls, or find controls that someone else has already written. To ease the process of finding quality customizer controls, I’ve created a Github repository to serve as a central location for such controls. If you have any controls you’d like to see created, or if you’ve created a control and would like to submit it, please head on over to the WordPress Theme Customizer Controls Github repository and get involved.

The Easy Way to Keep Your Custom Post Type in a Plugin

Just a few days ago, Justin Tadlock wrote about why custom post types belong in plugins. If you’re not sure whether to put your custom post type code in a plugin or place it directly into your theme, go read his article. If you already know that custom post types belong in plugins, then stay right here!

While Justin was writing his in depth article detailing all the reasons that custom post types belong in plugins, I was working on building a custom post type plugin generator. Now all you need to do to create a custom post type plugin is fill out a quick form, click “Generate Plugin” and you’re done! All the code is created dynamically based on the input you provide.

Try generating a custom post type plugin now!

How to Create a Multi-Category Control for the Theme Customizer

This tutorial will explain how to create a custom control for the WordPress theme customizer that will allow multiple categories to be selected via checkbox inputs. Chris Molitor asked me the other day if I knew how to do this, and it sounded like a good challenge. This tutorial assumes that you already know how to work with the theme customizer. If you’re not sure how to use the theme customizer, please see the WordPress Theme Customizer: a Comprehensive Developer’s Guide first.

Update: this control can now be used multiple times within the theme customizer (previously multiple instances caused problems). (more…)

The Best Things in Life are not Drag-and-Drop

Lately I’ve been doing a lot of thinking about the philosophy behind WordPress theming. It seems that the prevailing attitude is to make things easier than ever before. We want to enable the masses to create and manage their own websites. This sounds like a noble goal, but is it really really a good idea?

(more…)

Responsive Navigation Menus: Flexible Solutions

How do you build a mobile-first, progressively enhanced, responsive navigation menu? Let me introduce you to Menu Object (mo.js), a system for handling menus from the ground up. At its most basic level, mo.js dynamically adds and removes classes from menu elements to allow various menu states to be styled using CSS. For those of you dying to get right to the code, you can check out the Menu Object repository on Github. For everyone else, let’s start at the beginning…

(more…)

Introducing the Widgetize Plugin for WordPress

Quickly widgetize any post or page with the new Widgetize plugin. Many themes offer widgetized home pages, but Widgetize allows you to create any number of widget areas on any post or page. Here’s how it works…

(more…)

Responsive Navigation Menus: Problems and Proposals

One of the most challenging aspects of responsive design is creating a complex menu system that works well on mobile, tablet, and desktop devices. In this post, I will briefly discuss the common problems and then move on to outline a proposal for one possible way of handling them elegantly across a multitude of devices. (more…)

Theme Toolkit Tutorial: Custom Meta Boxes

This post will explain how to easily implement custom meta boxes in your WordPress theme by using the Theme Toolkit provided by Theme Foundation. If you don’t want to use the toolkit, but are interested in implementing custom meta boxes from scratch, please see WordPress Meta Boxes: a Comprehensive Developer’s Guide.

(more…)

WordPress Meta Boxes: a Comprehensive Developer’s Guide

This tutorial will attempt to cover everything you could possibly want to know about using meta boxes in WordPress. Although it is possible to add meta boxes directly to a theme, best practice is to add meta boxes via a plugin. In this tutorial, we will build a plugin to add a meta box to the WordPress post editor.

The full plugin is available on github.

The add_meta_box() function was added to WordPress in version 2.5, so it’s been around a while. If you read this whole tutorial, you’ll be around a while as well. So let’s get started…

(more…)

Theme Toolkit Tutorial: The WordPress Theme Customizer

This post will explain how to easily implement the WordPress theme customizer in your WordPress theme by using the Theme Toolkit provided by Theme Foundation. If you’re not interested in saving time and energy by using the theme toolkit, please see my previous tutorial explaining how to implement the theme customizer from scratch. Let’s get started.

(more…)

The WordPress Theme Customizer: a Comprehensive Developer’s Guide

This tutorial will explain in detail how to add support for the WordPress theme customizer to your WordPress theme.

The theme customizer was introduced in WordPress version 3.4. It allows for an editing environment where theme options can be tried by the administrator before being applied to the live site. In this tutorial, we will look at exactly how this feature can be added to a theme. The WordPress theme we will use for this example will be the Responsive theme version 1.8.0.1, by Emil Uzelac. This is one of the featured themes on WordPress.org at the moment and should give us a solid starting point. However, please feel free to use whatever theme you’d like as you follow along.

(more…)

A Beginning

Hello, and welcome to the Theme Foundation project. My name is Alex Mansfield and I am the sole developer behind Theme Foundation (at least for now). I am currently constructing a modular theme toolkit that will allow advanced features to be quickly and easily added to new and existing WordPress themes. The toolkit is in private beta at the moment, and includes modules for building custom metaboxes, theme options pages, and utilizing the WordPress theme customizer introduced in WordPress 3.4. Along with releasing the theme toolkit, I will be writing in-depth tutorials covering all the features included in the toolkit. If there are any features you would like to see included in the toolkit, please let me know. Thanks!

Sign up for updates on the project and for access to the theme toolkit beta.