DivUp Content

Description

Client friendly way to separate your WordPress post or page content into divs with (optional) custom CSS classes and ids. Adding the shortcode [divup] in between some content will split the content into 2 separate divs.

You can enter as many [divup] shortcodes to a post or page as you like. Great for creating columns of content for magazine style websites while keeping shortcode markup to an absolute minimum. DivUp Content never uses inline styles, but it does automatically give divs fiendishly clever classes like first, last, div-1, div-2, div-3, and div-odd, div-even, mul-3, mul-4 (multiple of 1,2,3,4 etc). You can then create your own style rules for the divs in style.css or with Microthemer (a visual design CSS plugin for customizing WordPress themes).

Adding ‘multiple of’ classes to divs is a unique feature of DivUp Content that makes grid layouts with multiple rows a breeze.

**NEWEST:
Added support for adding custom HTML attributes to divs/spans. Use [startwrap custom=’title: read this’] or [divup custom=”data-src:image.jpg”] (the custom attribute can be applied to both [startwrap] and [divup] shortcodes.
You can also do[startwrap custom=’title: read this|required:some value’] (seperate with a | pipe character for multiple)
When using [divup], two divs will be created. To apply custom attributes to the first and second divs use a comma e.g.[divup custom=”data-src:image1.jpg, data-src:image2.jpg”]

**NEWER:
Added support for span elements. Use [startwrap type=’span’].
Added support for no superfluous child elements. Use [startwrap parent=0] or [startwrap parent=’false’].

NEW: You can also add multiple [startwrap] and [endwrap] shortcodes to control how the divs are wrapped in a wrapper div. This overrides the original auto-wrapper functionality if you choose to use it.

3 Column Example CSS

The CSS for a 3 column layout (with 2 or more rows) in a 640px content area could be:

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

6 Column Example CSS

For a 6 column layout, you would just change the CSS to:

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

Advanced Layouts

DivUp Content even has a CSS class solution to multi-row grid layouts with varying column widths. There is no type of layout for which it would be unsuitable. But a knowledge of CSS is required.

Screenshots

  • 4x1 grid CSS (assuming a 640px content area): .divup-wrap { overflow:hidden; } .divup { float:left;width:145px;margin-right:20px; } .mul-4 { margin-right:0; }
  • This is an example of how you could use the [divup] shorcode in your markup (note: the custom classes and ids aren't necessary for creating the following grid layouts, they're just there to show you that you can add custom classes and ids if you want to).
  • 3x2 grid (assuming a 640px content area):.divup-wrap { overflow:hidden; } .divup { float:left;width:200px;margin-right:20px;margin-bottom:20px; } .div-1{ width:640px; }.div-1, div-4 { margin-right:0; }. For more advanced layouts, the special 'diff' CSS class has you covered. View the DivUp Content docs for more info.
  • Given the markup example above, this is how DivUp Content would wrap your content in divs with automatic and custom classes and ids (firebug screenshot)
  • 2x2 grid (assuming a 640px content area): .divup-wrap { overflow:hidden; } .divup { float:left;width:310px;margin-right:20px;margin-bottom:20px; } .div-even { margin-right:0; }

FAQ

Is This Plugin Supported?

Yes. Just send an email, and I’d be happy to help. Or, if you think the answer to your question might benefit others, please post your question in the DivUp Content Forum (which I actively monitor).

Reviews

I use this one most websites that i make

ellice909

this is really simple and allows for some really cool CSS designs.

The ability to target by multiples, odds/evens/ and specific numbers allows for a ton of different looks. The simple shortcode makes it easy for clients to use.

Perfect

christer_f

Simple and very useful. I initially had a minor issue with WP 4.4.1, but this was immediately fixed. Thanks to the author for being so reactive!

Read all 3 reviews

Changelog

2.7
* Fixed issue with comma separated divup attributes e.g. [divup id=”first-div-id, second-div-id”] (DivUp was outputting an extra space in the id attribute).

2.6
* Added support for [startwrap custom=’title: read this’]. See explanation in description.

2.5
* Fixed undefined issue when custom classes or ids aren’t used in [divup] shortcodes.

2.4
* Removed PHP4 compatibility, which fixed strict standards constructor error.
* Added support for span elements. Use [startwrap type=’span’]. The wrapper and all child elements will be spans instead of div elements.
* Added support for wrapper element with no superfluous child elements. Use [startwrap parent=0] or [startwrap parent=’false’].

2.1 – The ids given to divs had a trailing space in them. This is invalid and so CSS targeting failed to work.

With verison 2.0, you can now control when the wrapper div that wraps all the divup divs starts and ends. You can also separate the divs into multiple wrapper divs. The automatic ordinal classes will start from 1 again for each wrapper (although there is also a gloabl count of all the divs on the page). Use the new [startwrap] shortcode to begin your wrapper and the new [endwrap] shortcode to end your wrapper. Remember that every [startwrap] shortcode requires an accompanying [endwrap] else you are likely to break the layout of your page. The new [startwrap] and [endwrap] shortcodes are optional, if you don’t use them DivUp Content will still function as it always has.

Contributors & Developers

This is open source software. The following people have contributed to this plugin.

Contributors

Browse the code