Custom Widget Areas Display Order and Priority

Welcome back to the Catalyst Theme Feature of the Week after a short break.

In the previous post, we looked at Catalyst Theme Hooks and how they provide locations to attach Catalyst Theme Custom Widget Areas and Custom Hook Boxes.

In particular, we showed how to add a couple of Custom Hook Boxes into a hook location.

Using Catalyst Custom Widget Areas in a similar manner allows us to include widgetized content easily too.

So, this time, we’ll create some Custom Widget areas and look at how easy it is to place them as we wish, and also change that placement with just a few clicks.

First let’s create three Custom Widget Areas, called custom_widget_area_1, 2 and 3.

Creating Custom Widget Areas

Each of the Widget Areas has been attached to the catalyst_hook_before_dual_sidebars hook as shown above.

Some content for each Custom Widget Area is then added with Widgets using the WordPress Dashboard Menu > Appearance > Widgets.

In this case we’ve added one widget to each Custom Widget Area:

• a Tag Cloud in Custom Widget Area 1,
• an advert graphic linked to Catalyst Theme in Widget Area 2,
• and a link to a guide for using Catalyst Theme in Widget Area 3.

When this is published, we’ll see that the three Custom Widget Areas and their individual contents are shown above the dual sidebar area.

(For the sake of clarity for this example, the background to each widget area has also been shaded grey).

When this is published, the three Catalyst Custom Widget Areas and the widgetized content for each one of them is displayed as shown below.

Catalyst Custom Widget Areas with Widgetized Content

When we created the Custom Widget Areas in Advanced Options section of Catalyst Theme, we paid no attention to the priority option for each of the Areas, which were all left at the default setting of 10.

However, by using the priority option for each Custom Widget Area, we can specify the order in which they appear within a given Catalyst Hook location.

This means we can attach a number of Custom Widget Areas into the same Catalyst Hook location and have them appear in the order we desire.

The priority assignment option also makes it very, very easy to change the order of display should we wish to do so later on.

For example, we might prefer to move the widget area containing the Tag cloud to the bottom of the three areas, so that the adverts appear above and so get more prominence.

Subsequently we might wish to move the advert for the guide to the very top because of a new offer being made available for it, or likewise for the Catalyst advert graphic.

All we have to do to implement this is give each Custom Widget Area a priority as shown here.

Setting Priority Order for Custom Widget Areas

Custom Widget Areas with lower numbers have the higher priority and will be displayed earlier in the hook location.

In the example above, our third widget area with the text widget containing the advert for the guide has been given the highest priority.

The second widget area with the Catalyst advert text widget has been given the next highest priority, and the first widget area with the Tag Cloud widget has now been given the lowest priority of all.

Custom Widget Areas Ordered by Priority

The actual numerical values used for priority assignment do not matter, just their order.

To swap the display order of the second and third Widget areas (so that the Catalyst Advert then appears first) we could give the second area a priority number of say, 2 ; or conversely give the third area a priority number of say, 15. Either way round will work, but whichever is chosen, it is just that easy!

There are other ways to achieve this in the simple situation like that above (such as switching which widget appears in which widget area).

However, when you have more than one widget in an area and/or want to style a widget area individually, Catalyst and its Custom Widget Area functionality provide some great power and flexibility that enable more complex displays to be achieved and managed much more easily.

Have fun.

David.

David Pritchard is the author of the Catalyst Theme Cheat Sheet – a 200+ page guide to help users make the most of Catalyst Theme. It has been made freely available to licenced Catalyst users in the downloads section of the Catalyst Theme forum. David also has a site that covers WordPress, SEO, internet marketing techniques and other topics not directly related to Catalyst Theme itself at http://www.FastStepInternetMarketing.com