Download This Plugin
Simple Breaks adds in shortcodes for everyday html elements that get removed by visual mode such as [ br ] and [ hr ], as well as providing support for Clear left, clear right and clear both css attributes.
Usage
To use Simple Breaks, place the shortcode below into your post or page to get the desired result (without the spaced next to the [ and ]).
| [ br ] | Adds in a line break, accepts the attributes id and class |
| [ clearright ] | Pushes all the content below it down until no content is floating to the right, accepts the attributes id, class and span. |
| [ clearleft ] | Pushes all the content below it down until no content is floating to the left, accepts the attributes id, class and span. |
| [ clearboth ] | Pushes all the content below it down until no content is floating to the right or the left, accepts the attributes id, class and span. |
| [ hr ] | Horizontal Rule, draws a line across the page, accepts the attributes id, size class and color |
| [ space ] | Blank space, empty, nothing, pushes content down, accepts the attributes id, size and class |
The span attribute in [ clearleft ] [ clearright ] [ clearboth ] allows an override of the default tag used. when span=false (default) the tag used will be a div, however when span=true the tag used will be a span.
for example [ clearleft span=true ] will use a span tag instead of a div tag, and [ clearleft ] will use a div tag as default
Installation
Installation is Quick, just upload the Simple Breaks files to a Simple Breaks folder within wp-content/plugins and then activate the plugin through the admin dashboard, or find the plugin using the WordPress plugin search and click install
Frequently Asked Questions
Q. Where can the plugin be used?
Currently the plugin can be used anywhere that allows shortcodes.
Q. How can I customise the elements?
To customise the elements you can apply a css class using the “Class” attribute, or an ID using the “ID” attribute.
Downloaded and installed your plugin, and it works wonderfully. The break, hardrule and space codes will be particularly useful.
Any chance you could add buttons to the visual editor for the different functions and attributes? We do site setups for customers, and in many instances, expecting them to remember shortcodes when they just want to get a post up is asking a lot (they are of course focused on their business). I know adding buttons can be added to the editor, it is just not in my skill level.
Thanks,
James
Hey James, we just finished our latest version of the plugin which you can download shortly and it includes … buttons in visual editor. Hope you and your clients enjoy. It would be great if you could give us a link to our site to help others find our plugin and show you appreciate our work
Very useful tool, I love it. Thanks for sharing!
One thing I’d change (and I did so and added the code in the first version of the plugin, with version 2 I have to upgrade): -Tag as block-level can not be used as widely as I need to use the clear:both, so I added “clearfix”-rule for the clear:both and used a -Tag.
ok, arrow-brackets are not very useful in comments
Meant div-Tag (which is block-level) and replaced this by using a span-Tag instead.
Hi Heiki,
Thank you for your comment
You can further customise the tags though the use of the id and class attributes for example [ clearleft class='myClass' ] then in the stylesheet you can add “.myClass { display: inline; }” this will remove the block attribute and change it to be more like the span class
Thanks
Jamie
True for CSS, but sometimes a div-Tag would generate invalide code, and I love valide code
Hi Heiki,
I have never known a div tag to cause invalid code
if you bear with us, we shall release a new version of the plugin which will have an options page allowing you to choose between spans and divs 
Thanks
Jamie
Hi Jamie,
nesting a div-tag in a p-tag causes invalid markup, and I often use floating images. Sometimes I need to clearfix inside the paragraph, thus I prefer using a span-Tag for the clearfix.
Good News Heike,
We have released simple breaks version 2.1, this version has a span override ability added to the clear tags.
By changing [ clearleft ] to [ clearleft span=true ] the output will now be in span tags instead of div tags. This works the same for clear right and clear both
Thanks
Jamie
Jamie, your the best! Thanks a lot.
Thank you
Please remember to rate our plugin on the WordPress plugins site too
Jamie
Jamie, could you please check, if version 2.1 causes trouble with the tinymce. In my case there is no toolbar within the editor after activating simple breaks v 2.1, deactivating the plugin the toolbar is displayed.
strange, it was fine on my own testing site! i have released (yet) another! version (2.1.1) which should address this problem
Thanks
Jamie
Sorry Jamie, but 2.1 and 2.1.1 come without Tiny MCE buttons. Unzipping the plugin I’m getting the plugin-folder, but inside this, I miss the scripts and the folder for Tiny MCE (js and buttons)
Apologies Heike, there appears to be a problem with the plugin delivery SVN, i have completely wiped the svn folder and changed the file names, in about 15 minutes the 2.1.2 will be available which (fingers crossed) will work!
Thanks
Jamie
Sorry, but that’s the same with 2.1.2 !
Hi Denis,
Their appears to be an issue with the SVN and the file structure used, i have changed the file structure for the plugin and it works.
thanks
Jamie
Really pleased to have found this, was looking for a non-html way of setting clear:both esp for text by an image.
However for one site I am building I would like to have just the clearboth button and maybe one other, as there will be content managers nervous of anything to do with computers! If the option of which buttons to show could be added that would be really useful.
Hi Teresa, thanks for letting us know it was useful. We’ll add this feature request to the consideration list for a future release.
Hi Teresa,
An update has now been release which allows this functionality.
Thanks
Jamie
Thank you, that’s great.
At least, it is on a site I’ve got for trying out themes and plugins, it is on the site where I was hoping to use it.
But I’ve just inserted the plugin on another site, and it stops any TinyMCE buttons appearing – and the Simple Breaks ones don’t appear either! If I deactivate the Simple Breaks plugin or just un-tick all the options, the TinyMCE icons reappear.
All use WP 3.2 and the same theme, and have TinyMCE advanced in use. Same versions in each case. Other plugins and styling are different.
I’ve tried various things on the site where it’s not working: deactivated TinyMCE Advanced and the standard set of TinyMCE icons don’t appear either. Deactivated all other plugins as I suspected an interaction, no joy; set TinyMCE Advanced options to be identical to those on a site where it’s working, it still doesn’t work; de / re-activated, deleted and reinstalled. Nothing works.
2 (a working and non-working) of the 3 installs of it I did this afternoon, one I upgraded from previous version. I think the upgrade and the other working version had all options on by default, the non-working all off – but I could be wrong, didn’t expect a problem and so wasn’t attentive enough to be certain.
On the site where it’s not working it’s not that important, but I would have liked to understand in case I want to use it elsewhere, but don’t have time to investigate any further now.
Oops – realised I am using a different version of the theme afterall, I’ll see if that’s causing the problem when I get time.
Hello there,
I have been pulling my hair out over how to format my posts for a ‘step-by-step’ guide, so your plugin with the [clearright] function was a godsend.
I believe they only work though in IE? I have tried the page given in both Firefox and Chrome and the text just stacks up on the right hand side without the page breaks…
Thanks!
Clare
Hi Clare,
Thank you for your comment. clearright, clearleft and clearboth are compatible with all browsers.
Can you tell me what page you are having problems with.
Thanks
Jamie
Hi Jamie
That’s good news! The page is: http://frogsinmykitchen.com/?p=100
The text appears to the right of each image in IE, but in Chrome and Firefox the text doesn’t keep the layout.
Many thanks
Clare
Hi Clare,
Instead of using clearright, you should use [clearleft] as the image is floating to the left, alternatively if you use [clearboth] it wont matter which side the image is on, it will still move the text down.
Thanks
Jamie
Thanks, Jamie! Strange it worked still in IE!! I’ll make the changes and fingers crossed it will work in all browsers. I’ll keep you posted!
Cheers
Clare
Sometimes IE likes to do things it’s not supposed to do
never rely on it!
Hurrah! It works. Amazing – thanks so much for your plugin and your help. I’ve rated it with a most deserved 5 stars! Best, Clare
Thanks Clare! If you do one of the support suggestions listed on the plugins’ admin page like tweeting to help promote it that would be amazing