Using WordPress shortcodes to style a page with DIVs

I've been developing HTML/CSS/JS for a long while but I'm relatively new to custom WordPress development.

I have a situation where I want to use DIV elements to help divide up a page, and I would like the WordPress administrator to be able to edit the content in WordPress. Instead of putting HTML code in the content editor, I thought I would keep it need and tidy with some shortcodes.

As a simple example, here is a container DIV with four "4-column" DIVs:

<div class="homenav">
	<div class="col4">
		<h3>Subhead 1</h3>
		Some content here.
	</div>
	<div class="col4">
		<h3>Subhead 2</h3>
		Some content here.
	</div>
	<div class="col4">
		<h3>Subhead 3</h3>
		Some content here.
	</div>
	<div class="col4">
		<h3>Subhead 4</h3>
		Some content here.
	</div>
</div>

Open in new window


I wrote two shortcodes, one for the "homenav" container, one for the "col4" containers:

function homenav_shortcode($atts, $content=null){return '<div class="homenav clearfix">' . do_shortcode($content) . '</div>';}
add_shortcode('homenav', 'homenav_shortcode');

function col4_shortcode($atts, $content=null){return '<div class="col4">' . do_shortcode($content) . '</div>';}
add_shortcode('col4', 'col4_shortcode');

Open in new window


However, I end up with a lot of extraneous <p></p> and <br> elements when using the WordPress content editor, which is messing with my layout.

So, I guess what I am asking, is whether or not my overall approach is the best way to do this. If I can't figure out how to manipulate the WordPress content editor to avoid extraneous <p></p> and <br> elements, I can't expect the less-computer-savvy WordPress admin to do so. I need to keep the HTML tight, but still allow the admin to change the content.

Is there a solution to what is happening now, or perhaps a better way overall?
Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
 
Tom BeckCommented:
Try adding this to your functions.php file. It worked in my tests.

remove_filter ('the_content','wpautop');
0
 
Brad BansnerWeb DeveloperAuthor Commented:
OK, so that successfully removes extraneous <p></p> and even <br> tags. However, it also removes EVERY paragraph tag from my entire site. Is there an easy way to only do this within my shortcode? Currently looking around on Google.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
This seems to do the trick?

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop',99);
add_filter('the_content', 'shortcode_unautop',100);
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.