WordPress.org

Plugin Directory

Test out the new Plugin Directory and let us know what you think.

DivUp Content

Flexible & elegant way to split post/page content into divs. Divs are given ordinal classes (div-1, div-2 etc). Minimal shortcode. Client Friendly

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.

Requires: 2.8 or higher
Compatible up to: 4.4.5
Last Updated: 8 months ago
Active Installs: 1,000+

Ratings

5 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,2,2
100,1,1
100,1,1
100,1,1
100,1,1