Title: DivUp Content Author: Themeover Published: Agẹmọ 17, 2011 Last modified: Ọwẹ́wẹ̀ 27, 2022 --- Ṣàwárí àwọn plugin Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**. Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun. ![](https://s.w.org/plugins/geopattern-icon/divup-content.svg) # DivUp Content Láti ọwọ́ [Themeover](https://profiles.wordpress.org/bastywebb/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/divup-content.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/divup-content/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/divup-content/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/divup-content/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/divup-content/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/divup-content/) ## Àpèjúwe **NOTE**: This plugin was originally created to solve the issue of splitting classic editor content into divs, using shortcodes. On Sept 27th, 2022, I tested to see how this plugin works with Gutenberg and it actually still works fine (because the divs are rendered AFTER Gutenberg does itÌtumọ̀ Yorùbá: ’s thing). But itÌtumọ̀ Yorùbá: ’s worth mentioning that there is a **Group** block in Gutenberg that serves the same purpose, and might be more intuitive than working with shortcodes for some users. That said, if youÌtumọ̀ Yorùbá: ’ve disabled Gutenberg in favour of the classic editor, this plugin is still useful. And although IÌtumọ̀ Yorùbá: ’m not adding new features, I will fix any bugs people report. Now on to how it actually works: 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](http://themeover.com/)( a visual design CSS plugin for customizing WordPress sites). #### 3 Column Example CSS The CSS for a **3 column layout** could be: .divup-wrap { display: grid; grid-template-columns: repeat(3, 1fr); } #### 6 Column Example CSS For a **6 column layout** (with gaps), you would just change the CSS to: .divup-wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; } For more complex grid layouts with content spanning different numbers of columns and rows, you may find [Microthemer](http://themeover.com/)‘s visual controls for generating the CSS grid rules quite handy. Just select the .divup-wrap element when editing with Microthemer, and then position the grid items however you like using drag and drop. ### Features added **NEWEST**: Added support for adding custom HTML attributes to divs/spans. Use [ startwrap custom=Ìtumọ̀ Yorùbá: ’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=Ìtumọ̀ Yorùbá: ’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=Ìtumọ̀ Yorùbá: ’ span’]. Added support for no superfluous child elements. Use [startwrap parent=0] or [startwrap parent=Ìtumọ̀ Yorùbá: ’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.** The best way to understand how DivUp Content works (including the advanced aspects) is to **copy and paste the ONE of the following dummy content examples below into a post or page and then inspect the html with your browser (Right-click > Inpsect)** Ìtumọ̀ Yorùbá: – paying attention to the CSS classes it automatically applies to the divs. ### Dummy Content 1 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 id=Ìtumọ̀ Yorùbá: ’id-a, id-b’ class=Ìtumọ̀ Yorùbá: ’class-a, class-b class- b2Ìtumọ̀ Yorùbá: ′] 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 class=Ìtumọ̀ Yorùbá: ’my-class diff ‘] 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 id=Ìtumọ̀ Yorùbá: ’my-id’ class=Ìtumọ̀ Yorùbá: ’diff my-class2Ìtumọ̀ Yorùbá:′] 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 class=Ìtumọ̀ Yorùbá: ’diff’] 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. 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. ### Dummy Content 2 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. 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. [startwrap class=”my-wrap-class another-wrap-class”] 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 id=Ìtumọ̀ Yorùbá: ’id-a, id-b’ class=Ìtumọ̀ Yorùbá: ’class-a, class-b class- b2Ìtumọ̀ Yorùbá: ′] 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] 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. [startwrap id=”my-wrap-id” class=”hello-wrap”] 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 class=Ìtumọ̀ Yorùbá: ’my-class diff ‘] 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 id=Ìtumọ̀ Yorùbá: ’my-id’ class=Ìtumọ̀ Yorùbá: ’diff my-class2Ìtumọ̀ Yorùbá:′] 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 class=Ìtumọ̀ Yorùbá: ’diff’] 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. 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] ## Àwọn àwòrán ìbòjú [⌊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).⌉⌊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).⌉[ This is an example of how you could use the [divup] shorcode in your markup (note: the custom classes and ids arenÌtumọ̀ Yorùbá: ’t necessary for creating the following grid layouts, theyÌtumọ̀ Yorùbá: ’re just there to show you that you can add custom classes and ids if you want to). [⌊Given the markup example in the previous screenshot, this is how DivUp Content would wrap your content in divs with automatic and custom classes and ids.⌉⌊Given the markup example in the previous screenshot, this is how DivUp Content would wrap your content in divs with automatic and custom classes and ids.⌉[ Given the markup example in the previous screenshot, this is how DivUp Content would wrap your content in divs with automatic and custom classes and ids. [[ [[ [[ ## Ìgbéwọlẹ̀ 1. Upload `divup` directory to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. Use the [divup] shortcode in your posts or pages: ## FAQ ### Is This Plugin Supported? Yes. Just send an email, and IÌtumọ̀ Yorùbá: ’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](https://wordpress.org/tags/divup-content?forum_id=10) (which I actively monitor). ## Àwọn àgbéyẹ̀wò ![](https://secure.gravatar.com/avatar/2b7b820ef1498c9c1fc4ee0da89e664ff786245569eb2c14ac5fd7be9cd394ff? s=60&d=retro&r=g) ### 󠀁[Works well](https://wordpress.org/support/topic/works-well-2599/)󠁿 [Ian](https://profiles.wordpress.org/ianwork/) Ògún 12, 2022 Works well, simple and straight forward. ![](https://secure.gravatar.com/avatar/b32128cbbddd395a0e55041cbca50ebeee7924639bc9c76651d98bff47634e58? s=60&d=retro&r=g) ### 󠀁[I use this one most websites that i make](https://wordpress.org/support/topic/i-use-this-one-most-websites-that-i-make/)󠁿 [ellice909](https://profiles.wordpress.org/ellice909/) Ọwẹ́wẹ̀ 3, 2016 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. ![](https://secure.gravatar.com/avatar/4b65be7ee87d04f0ed618490cf14d7a4b021b982df928ac2d84b8eea499a505a? s=60&d=retro&r=g) ### 󠀁[Perfect](https://wordpress.org/support/topic/perfect-2683/)󠁿 [christer_f](https://profiles.wordpress.org/christer_f/) Ọwẹ́wẹ̀ 3, 2016 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! [ Ka gbogbo àwọn àgbéyẹ̀wò 4 ](https://wordpress.org/support/plugin/divup-content/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “DivUp Content” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ Themeover ](https://profiles.wordpress.org/bastywebb/) [Túmọ̀ “DivUp Content” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/divup-content) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/divup-content/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/divup-content/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/divup-content/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/divup-content/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà 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=Ìtumọ̀ Yorùbá: ’title: read this’]. See explanation in description. 2.5 * Fixed undefined issue when custom classes or ids arenÌtumọ̀ Yorùbá: ’t used in [divup] shortcodes. 2.4 * Removed PHP4 compatibility, which fixed strict standards constructor error.* Added support for span elements. Use [startwrap type=Ìtumọ̀ Yorùbá: ’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=Ìtumọ̀ Yorùbá: ’false’]. 2.1 Ìtumọ̀ Yorùbá: – The ids given to divs had a trailing space in them. This is invalid and so CSS targeting failed to work. With version 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Ìtumọ̀ Yorùbá: ’t use them DivUp Content will still function as it always has. ## Àkójọpọ̀ Meta * Ẹ̀yà **2.7** * Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 4 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **200+** * Ẹ̀yà WordPress ** 2.8 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **6.0.12** * Ẹ̀yà PHP ** 5.6 tàbí ju bẹ́ẹ̀ lọ ** * Èdè * [English (US)](https://wordpress.org/plugins/divup-content/) * Àwọn àmì * [classic editor](https://yor.wordpress.org/plugins/tags/classic-editor/)[column layout](https://yor.wordpress.org/plugins/tags/column-layout/) [columns](https://yor.wordpress.org/plugins/tags/columns/)[css grid](https://yor.wordpress.org/plugins/tags/css-grid/) [split](https://yor.wordpress.org/plugins/tags/split/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/divup-content/advanced/) ## Àwọn ìbò 5 lára àwọn ìràwọ̀ 5. * [ 4 5-star reviews ](https://wordpress.org/support/plugin/divup-content/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/divup-content/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/divup-content/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/divup-content/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/divup-content/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/divup-content/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/divup-content/reviews/) ## Àwọn Olùkópa * [ Themeover ](https://profiles.wordpress.org/bastywebb/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/divup-content/) ## Ṣe ìtọrẹ Ṣé o fẹ́ ṣe àtìlẹ́yìn fún ìlọsíwájú plugin yìí? [ Ṣe ìtọrẹ sí plugin yìí ](http://themeover.com/microthemer/)