If you are using WordPress as a blog, organizing your content is quite straight forward. You categorize and tag your posts, create nav-menus, to link the most important categories, use archive or calender widgets and order your posts by publishing date (which is the default). Using WordPress as a CMS for a common website and building the navigation, often requires a bit more structural planning. The thing is that there are multiple strategies, which might be right or wrong depending on your demands. In this article I want to present a list of the approaches I use.

Inbuilt and custom post types

But first some words about the standard post types build into WordPress. When I build a website with WordPress, I naturally use pages for all static content, but in the beginning I even tried to use the standard posts post type for all continuously updated content like news sections, upcoming events and so on.

However, after some time I realized that posts really only should be used for blog content and nothing else. All the other stuff should be implemented as custom post type. There are two simple reasons: Your client might decide to integrate a blog with the website in the future and by that time the posts section is bloated with other content. Secondly is my experience that custom post types for events or newsfeeds are just more usable and intentional, than the standard posts, especially when there is some extra functionality needed, like start/end-date for an event.

So, when you are implementing one of the following strategies, make sure that you choose your post types well.

One-level menu

The easiest variant of content structure is just a bunch of pages without any hierarchy. Typically you would create a menu, under Appearance->Menus in the admin interface, and add all relevant pages to it. Here an example how to embed a simple menu into a theme:

wp_nav_menu( array( 'theme_location' => 'main-menu' ) );

For many small businesses this content structure is appropriate. Often it is quite easy to determine the few sections of content the wesite’s user will be interested in, e.g. “General information”, “References” and “Contact information”. You will both get a easily navigated site and a very simple backend.

When not to use it: There aren’t any drawbacks. If the content structure stays as simple as described above, there will be no problems.

Multi-level menu

Now, not every website works with a simple structure and not every client is satisfied with only telling the stuff visitors want to know. Sometimes clients want there websites to present the whole company structure and in these cases you need a hierarchical navigation, perhaps with a dropdown menu.

The good thing is, that there is support for multi-level menus in WordPress and implementing them, can be quite simple. In the back-end it is as easy doing some drag&drop actions to create a hierarchical menu of your pages and the simplest way to implement it in your theme is just the same as with one-level menus. You might add a depth parameter, to limit the count of levels your for the navigation.

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'depth' => 2
) );

This would print a nested list representing your hierarchical menu and with some suckerfish magic you make it a dropdown in minutes. You can even build a nested navigation where every page contains a submenu with pages on the same level, by printing the whole menu on every page and hiding the irrelevant portions of the menu with CSS.

But there are drawbacks. The big problem I see with multi-level menus is, that your menu, doesn’t organize your content. Even if you have built a well structured menu, your pages section in the admin-interface isn’t organized at all, it’s just a very long list of pages. I see this as a real usability issue for our clients and there are only two (suboptimal) solutions I can see. The first is telling your client to use the search field, because the structure showed on the website is not represented in the pages section. The other is to hierarchically organize your pages the same way you did it with the menu and mirroring all changes in future, which could be a big amount of extra work.

When not to use it: If there are many pages and you don’t want your client to do the extra work of organizing both menus and pages. Or if you want to implement submenus/breadcrumbs without printing the irrelevant parts and hiding them with CSS.

Multi-level pages

If multi-level menus don’t work for you, you could abandon menus and only organize by page hierarchy. Compared to the really easy way you drag and drop menus, it is a somewhat clumsy method, to enter the editor of every page and choose a parent, but it works. Here is how to create a menu just from the page structure:

<ul>
    <?php
        wp_list_pages( array(
            'title_li' => null
        ) );
    ?>
</ul>

The advantage over menus is that you directly can access the pages parents and child’s and thus know on which menu level you are operating with your page template. This makes it possible to build all kinds of custom navigation elements like submenus or breadcrumbs. Following the code to print a submenu with links to pages on the same level as the current page.

<ul>
    <?php
        wp_list_pages( array(
            'title_li' => null,
            'child_of' => get_post( get_the_ID() )->post_parent
        ) );
    ?>
</ul>

One thing to remember is that you can’t add one page in multiple places like you can with menus, because you are generating the menu directly from the page hierarchy. In case you need, say a contact page, in two places on the menu you have to create two contact pages.

When not to use it: If your client doesn’t feel comfortable with the way you structure pages or you want to link pages in multiple places in your menu this approach isn’t the best.

Integrate categories with pages and menus

You can even use categories to organize your pages. You could use the built in categories, but I think it’s better to create an own taxonomy, mostly because of the reasons discussed above, why you shouldn’t use posts for something else than blogging. Following some code to add a custom taxonomy to categorize pages, to include in the functions.php:

add_action( 'init', 'add_page_categories' );

function add_page_categories() {
   register_taxonomy(
      'page-category',
      'page',
      array(
         'label' => 'Page Category',
         'rewrite' => array( 'slug' => 'page_cat' ),
         'hierarchical' => true
      )
   );
}

Now you can select the categories for every page and add them to a (multi-level) menu. The advantage over simple multi-level menus is that the categories add some structure to the pages section, even if you don’t get the whole hierarchy. In my opinion the checkbox to select the category is slightly more usable than the child/parent selection lists, which are building the page hierarchy.

And there is another thing about this way of building a menu: you can list multiple pages under one menu-item, which is kind of sabotaging the static content thought. However, it can make sense in some situations, for example a contact page which is intended to list all employees and you add one page for everyone instead of listing them in one pages content block.

When not to use it: If your client isn’t familiar with the WordPress UI it might be one more hurdle to learn not only page editing and building menus, but also using the category checkboxes.

One-level menu plus page-hierarchy

This last approach to multi-level navigation uses both menus and page hierarchy. The idea is to only use a menu for the first navigation level, so you can easily rearrange and fully control your main menu. Then, all the pages linked in your main menu are used as parents for subpages, so the multiple levels get implemented by the page hierarchy. The next two pieces of code show how to print the main navigation with the wp_nav_menu function and how to output a submenu by using wp_list_pages.

<!-- main-menu, only add parents -->
<?php
    wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'depth' => 1
    ) );
?>
<!-- end main-menu -->
...
<!-- sub-menu -->
<ul>
    <?php
        wp_list_pages( array(
            'title_li' => null,
            'child_of' => get_post( get_the_ID() )->post_parent
        ) );
    ?>
</ul>
<!-- end sub-menu -->

This solution I use very much because it solves a whole bunch of problems I discussed earlier in this article:

  • you get the flexibility of menus for your main navigation
  • you get the structural advantages of hierarchical pages
  • you don’t have to build the hierarchy two times
  • you can present a clean and logical structure to your clients

When not to use it: If you want to build a simple dropdown-menu and can be sure that there wont be any more complicated navigation requirements, multi-level menus would be the better choice.

Bottom line

WordPress as CMS has quite a few possibilities to organize your content and build a navigation. Of all approaches I’ve shown I think I would prefer the last one, mainmenu plus page hierarchy, in the most cases where a multi-level navigation is needed. It uses both the strengths of menus and page hierarchy, is easy to implement with the WordPress API and extendable if new navigation functionality is needed. From a usability point of view it makes use of the WordPress UI in the most common and intuitive way.

WordPress themes are amazing and since WordPress 3.4 there is an inbuilt customizer to make individual changes as easy as possible. One commonly used feature of the customizer is changing the background color or other basic colors of the theme. That is really great, but I like to think that there are a lot of bloggers like me out there, without any talent regarding colors or design. For all of us, manual color customization uses to generate ugly blogs. So think it would be great to have preconfigured WordPress theme color schemes.

My “Color Scheme every Theme” plugin is built to help us to customize the colors of our blogs. It makes it easy to extract the colors of every theme (if it is built with css) and to change them from the admin interface. So, if you want to ask one of your designer friends for help, he or she doesn’t have to go through hundreds of lines of css, it’s enough to change the extracted color scheme via the admininterface, no coding involved.

Embeding preconfigured color schemes in the themes you are selling

I think that’s a really nice feature, but I think even more important is the possibility to embed as many preconfigured color schemes as you want in a theme. So, if you are a themedeveloper, generate some perfectly matching color schemes before you upload your theme to a marketplace of your choice, make a light and dark variant, a greyscaled and colored one or a variant for all four seasons. Then, embed those in your theme and make it even more valuable for your customers.

Color Scheme every Theme 2.0 (read about v1.o here) makes it even more easy to create color schemes for WordPress themes.

Get version 2.0 on wordpress.org

After the release of version 1.0, some bug-fixing and the release of two minor versions I had got so much feedback that I thought it was time to implement the two feature requests most users suggested:

  • Editing color schemes directly in the admin interface, instead of having to add code in the functions.php
  • An option to make the css for all schemes available in the theme, to make it possible to change the scheme not only via the admin interface, but even on the front-end.

This resulted in a completely new options page, see a screenshot below:

screenshot-2

Here you got the possibility to edit the scheme directly in the admin interface. Just click on a color and change it in the Change color input field, hit enter, pick the next color you want to change. Don’t forget to save the schemes when you are done.

If you want to use the Dynamic theme colors option and used version 1.0 of the plugin, you have to regenerate the schemes.

There is still the possibility to permanently add a scheme to your theme by copying it to the functions.php of that theme. If you want to do that, just create the new theme via the admin interface, save and click on the < embed in theme > link, which opens an textarea with the code you have to add in it.

Download on wordpress.org: Color Scheme every Theme

WordPress 3.4 gave us a tool for theme customization, and I really like the idea. Changing the background color or adding a header image makes even the most downloaded theme on the internet unique. So I had this idea of not only changing the background color, but changing the whole color scheme of a theme and thus building for example a green, red and blue variant of a theme or a dark and a light version. A WordPress color scheme plugin, that would both be great for users, to adjust their downloaded themes, and for theme developers, to provide their themes with multiple color schemes.

Three simple steps to make your own color scheme

  1. Generating the css – The first step, after installing and activating the plugin, is scanning your current theme after color-relevant css. Go to the plugins settings page under Settings -> Color scheme every theme and click the generate button. This will scan all the css files in your current theme after colors, generate code to overwrite the default colors and provide you with a color scheme template to add to your functions.php. After clicking the generate button you will see two textfields. The first with the color scheme template …
    if ( function_exists( 'cset_add_color_scheme' ) ) {
    	cset_add_color_scheme( 'scheme-name', array(
    		'$color-1' =&gt; '#111111',
    		'$color-2' =&gt; '#111111',
    		'$color-3' =&gt; '#111111',
    		'$color-4' =&gt; '#111111',
    		'$color-5' =&gt; '#111111',
    		'$color-6' =&gt; '#111111',
    	) );
    }
    

    … and the second with the default colors, found in you theme.

    /**
     * Default colors
     *
     * $color-1: #efefef;
     * $color-2: rgba(0,0,0,0.5);
     * $color-3: rgba(0,0,0,0);
     * $color-4: #fff;
     * $color-5: #000;
     * $color-6: #222;
     */
    
  2. Adding a scheme to the functions.php – Now you only have to add one or more color schemes to your themes functions.php. Just copy and paste the first code-snippet and change the colors as you like. Allowed are all valid css color definitions, inclusive rgb/rgba and hsl/hsla.
  3. Choosing a scheme – It’s almost done, the last step is going to the customize section of your theme an choosing the color scheme. Click in the admin menu on Appearance -> Themes and then on the Customize link of the current theme.screenshot-1

    Now you should see the schemes you created in the Color Schemes section, choose one and see a live preview to the right and save if you want to publish the new scheme.

Next development steps

This plugin is really not much more than a working prototype. I have some ideas, to make it really great.

  • Making the generator work for other themes than the currently activated (even parent/child themes).
  • Saving color schemes in the options, so there are no changes to the functions.php needed.
  • Generating random color schemes or automatically making the default scheme ‘warmer’ or ‘colder’.
  • Testing, bugfixing and discussing

Troubleshooting

If there is something not working, you are welcome to contact me via the comment section of this article or twitter. But check some things first, to make it easier for me to locate the problem:

  1. Check if your WordPress version is 3.4 or higher and if your PHP version is 4.3.0 or higher.
  2. To overwrite the color scheme of your theme, the plugin does save a file in the wp-content/uploads/ directory. So this directory must have write permissions set.
  3. Set the WP_DEBUG constant in your wp-config.php file to true and see if there are any errors shown when you use the plugin.
  4. Try to deactivate all other plugins. If the problem disappears I have to know which plugins you use, to help.
  5. Give me as much information about your system as possible, when you contact me.

What do you think?

Of course I want to hear what your thoughts and experiences are. Is this plugin usable for you, would you like too see some features it doesn’t have at the moment or do you have some color schemes, you want to share? Please comment or contact me on twitter and let me know what you think!

if (function_exists('add_image_size')) {
   add_image_size( 'dummy-1', 940, 450, true );
   add_image_size( 'dummy-2', 480, 0 );
}

global $_wp_additional_image_sizes;
foreach ( $_wp_additional_image_sizes as $name => $image_size ){
    update_option( $name."_size_w", $image_size['width'] );
    update_option( $name."_size_h", $image_size['height'] );
    update_option( $name."_crop", $image_size['crop'] );
}

add_filter( 'intermediate_image_sizes', 'regenerate_custom_image_sizes' );
function regenerate_custom_image_sizes( $sizes ){
    global $_wp_additional_image_sizes;
    foreach ( $_wp_additional_image_sizes as $name => $size ){
        $sizes[] = $name;
    }
    return $sizes;
}

WordPress custom image size crop: The snippets Story

If you are using custom image sizes in your WordPress theme you likely know the problem. Cropping, rotating or flipping an image via the WordPress image editor, works just on the original. After editing the image is not available in your custom sizes anymore, all you get in your theme is the edited version in original size.

I thought that there has to be a simple solution to this problem, because it is pretty basic after all. But a quick google search just got me not working code. Finally I found some code on pastebin that pointed me in the right direction.

Copy and paste the above code into your functions.php, adjust the image sizes and even your cropped images should be available in your custom sizes.