WordPress Plugin Development Nottingham

I've been getting into WordPress Plugin Development lately. I've just released a Premium WordPress Plugin that puts the joy of web design into the hands of non-web designers. Before developing Microthemer I created this handy little FREE plugin I made that solves the problem of dividing WordPress content up into separate "divs" rather elegantly. It's imaginatively called DivUp Content.

Why Might You Want To Use DivUp Content

DivUp Content is most useful for web designers who are building their Clients a content managed website or blog using WordPress. The problem is this: You want to give your client full editorial control over every aspect of the page, but sometimes you need to insert HTML markup around content in order to display it in a certain way. Splitting content into columns is a classic example of this, though there are plenty of other cases.

The WordPress text editor has two tabs for two different modes of editing. One is a straightforward HTML editor, the other is a user-friendly text editor (wysiwyg) that creates the HTML for you when you use the toolbar icons at the top. The trouble for web designers is that if they add some HTML using the HTML tab, when the client comes to update the content (using the wysiwyg tab) they will inevitably mess up the invisible HTML code that lurks in the background (through no fault off their own). To get around this kind of problem, WordPress introduced shortcodes.

A shortcode is basically a small bit of text that acts as a place-holder for some HTML. DivUp Content uses this shortcode method to achieve it's goal of splitting content into separate divs in the most intuitive and non-intrusive way possible.

How To use DivUp Content

Lets say you have four paragraphs of text on a post or page you're editing. If you insert 3 "[divup]" (without quotes) shortcodes, in between the four paragraphs, DivUp Content will split the content above the [divup] shortcode into one div and the content below the [divup] shortcode into another div. There is no limit to how many [divup] shortcodes you can insert.

If you inserted three [divup] shortcodes like so:

This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text.

[divup id='first-div-custom-id, second-div-id' class='first-div-class, second-div-custom-class']

This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text.

[divup id='another-custom-id' class='another-custom-class']

This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text.

[divup]

This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text.

DivUp Content would markup the content in the following way (if the post/page had an ID of 32):

<div id="divup-post-32" class="divup-wrap">
<div id="first-div-custom-id"  class="divup div-1 div-odd first first-div-class">
<p>This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text. This is paragraph one text.</p>
</div>

<div id="second-div-id" class="divup div-2 div-even second-div-custom-class">
<p>This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text. This is paragraph two text.</p>
</div>

<div id="another-custom-id" class="divup div-3 div-odd mul-3 another-custom-class">
<p>This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text. This is paragraph three text.</p>
</div>

<div class="divup div-4 div-even mul-4 last">
<p>This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text. This is paragraph four text.</p>
</div>
</div>

Why DivUp Content Is A Great Choice

There are a few things to note about the CSS classes DivUp Content adds in the example above.
  • Divup Content counts the number of times the user has inserted the [divup] shortcode in the post or page so that it can give the divs ordinal classes like div-1, div-2, first, last.
  • CSS id's and classes can be manually inserted using shortcode parameters. But when splitting content for the purpose of columnising the content this is usually unnecessary because:
  • Divup Content adds 'multiple of' classes (div-odd, div-even, mul-3, mul-4 etc) which makes it very easy to change a multi-row column layout by only changing the CSS in the external style sheet.
  • Also, notice that the user just has to add "content 1[divup]content 2" to split content into 2 separate divs as opposed to "[divup]content 1[/divup] [divup]content 2[/divup]". Easy peasy.
  • The post-id is used in the id for the divup-wrap div so that different pages can easily have different layouts
  • Also, see the 2 updates at the bottom of the page.

Example CSS Styling

Given a 640px content area, the markup in the example above could be styled in the following ways:

/* 2 column */
.divup-wrap {
    overflow:hidden;
}
.divup {
    float:left;
    width:310px;
    margin-right:20px;
}
.div-even {
    margin-right:0;
}

/* 3 column */
.divup-wrap {
    overflow:hidden;
}
.divup {
    float:left;
    width:200px;
    margin-right:20px;
}
.mul-3 {
    margin-right:0;
}

/* 6 column */
.divup-wrap {
    overflow:hidden;
}
.divup {
    float:left;
    width:100px;
    margin-right:8px;
}
.mul-6 {
    margin-right:0;
}


Download Latest Version of DivUp Content (Compatible with WordPress versions 2.8 to 3.2.1)

Did this plugin save your bacon? Please consider a small donation to the NSPCC children's charity:

WordPress Plugin Development Nottingham

Update - Addressed 2 Shortcomings

  1. You can now apply custom ids and divs to the first div by specifying comma separated ids and classes in the first shortcode, e.g. [divup id="id-a, id-b" class="class-a, class-b"]. The first div would have an id of 'id-a' and a class of 'class-a'. The second div would have an id of 'id-b' and a class of 'class-b'.
  2. DivUp Content applies 'multiple of' (div-odd, div-even, mul-3, mul-4 etc) classes to divs so that the same styling can be applied to columns in different rows with minimal CSS code. But if you give some columns a different width to the norm, the 'multiple of' classes on subsequent divs gets messed up. The solution is simple though. Apply the 'diff' class to all columns on a row that contain a non-default number of columns, e.g. [divup class='diff']. More about this below.

Using The 'diff' Class For Complex Grid Layouts

Imagine you have a grid layout of 4 columns and 4 rows. You would achieve this using DivUp Content by inserting 15 [divup] shortcodes in between your content at various points (creating 16 divs). A common way to mark this up would be to give all the columns an equal width (e.g. 145px) and an equal right margin (e.g. 20px) apart from the last column, which has no right margin. By specifying the following in your CSS stylesheet you could easily give the last column in every row a right margin of 0: ".mul-4 { margin-right:0 }".

However, what if you want only 2 columns in the second row (twice as wide as all the others)? You might add the following CSS: ".div-5, div-6 { width: 310px; } div-6 { margin-right:0; }". But now the second column in the third row is not going to have a right margin (because it has the class 'mul-4'), yet the forth column in the third row will have an unwanted right margin (because it doesn't have the class 'mul-4' when it should). Everything is messed up! But the 'diff' class comes to the rescue.

Given the current example scenario, if you were to update the 4th and 5th shortcode to [divup class='diff'], when DivUp Content adds the ordinal div-x, div-odd/even and mul-x classes, it would skip the 5th and 6th div. Instead, it would give them diff-x, diff-odd/even and diff-mul-x classes. So now, the only additional CSS you would need to add would be: ".diff { width: 310px; } diff-even { margin-right:0; } and everything is OK again. This is a simple example, much more deviant grid layouts could be achieved with DivUp Content while still keeping the shortcode markup and CSS extremely lean.

Non-CSS Coders - You Have Options Now Thanks To Microloader & Microthemer Lite

If you want to use DivUp Content to style your WordPress Post/Page content into grids of 2, 3, or 4 columns you can now so so without having to write any CSS with the aid of Microloader. You can install a CSS settings pack (referred to as a "Plugin Pack") with either of these free plugins. We recommend Microthemer Lite as it does everything Microloader does and also gives you a taste of what you could do with Microthemer.

Download and install Microthemer Lite
Or Download and install Microloader.
Then download the "Plugin Pack" which has the CSS you need to make columns

Activating The Plugin Pack

  • With Microloader, all you need to do is go to Appearance > Microloader and then click the "Activate" link to the right of the Plugin Pack Thumbnail
  • With Microthemer/Lite you need to go to the Microthemer UI page and "Import" the Plugin Pack (using the overwrite or merge method depending on whether or not you have styles in the interface you want to keep). 

Styling your WordPress Post/Page Content into Columns

In order to make use of the styling contained in the Plugin Pack you need to use the [divup] shortcodes in a certain way. Version 2 of DivUp Content introduced a way to wrap the divs DivUp Content creates. You can now use the shortcodes [startwrap] and [endwrap] before and after your [divup] shortcodes in order to segment them.

All you need to do to style divup boxes contained between [startwrap] and [endwrap] shortcodes into columns is add any of the following classes to the [startwrap] shortcode.

[startwrap class="two"] (boxes will be styled as two-colummn grid)
[startwrap class="three"] (boxes will be styled as three-colummn grid)
[startwrap class="four"] (boxes will be styled as four-colummn grid)

Microthemer Lite Only
Microthemer Lite is actually a very powerful visual design plugin. If you want to add additional styling to the column boxes that DivUp creates, such as padding or background colours, Microthemer provides a visual interface for doing so without writing code. So have a play!

Dummy Data

If you paste the following dummy data into a WordPress Post or Page after installing and activating the Plugin Pack, you will see how the text gets styled into columns:

**Two Columns**

[startwrap class="two"]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[endwrap]

**Three Columns**

[startwrap class="three"]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[endwrap]

**Four Columns**

[startwrap class="four"]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[divup]

Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.

[endwrap]