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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Try adding this to your functions.php file. It worked in my tests.

remove_filter ('the_content','wpautop');
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.