Visual HTML INLINE TEXT HEADINGS BLOCKQUOTE UL OL TABLE IMG Gimme Everything Clear All

Snippets to make your day better

You want to give your users freedom, that's the point of a CMS, but you also want visual control of what they output. Where to draw the line is a bit of a grey area, and contextual to the project your working on. To get anecdotal about this, I once had a client complain that the 'dotted lists' (•) they we're creating were coming out as 'dashed lists' (~) ...They didn't understand it was a stylistic decision and thought the site was broken. With this being said, use any of the following with caution.

Stop Images Being Wrapped in 'P' Tags

The Problem The PHP

You have very little control of the_content(); tag which is used to dump the main body of content onto the page. Images get wrapped inside paragraph tags which makes them inconsistant and potentially harder to style. This code in your functions.php file will help keep the two seperate.

This was poached from CSS-Tricks.com


function filter_ptags_on_images($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}

add_filter('the_content', 'filter_ptags_on_images');
			

Stop People Making Things Horrible Colors!

The Problem The jQuery The CSS

I'd probably advise against this, unless you have a really good reason! But you can, if you want, target text elements that have inline color styling, remove it and then style them subtly to add some differentation.


$('#content p[style], #content span[style]')
	.css('color', '')
	.addClass('resetcolor');
			

#content {
	color:#444;
}
#content .resetcolor {
	color:#000;
	font-weight:bold;
}

Stop users creating Galleries

The Problem The PHP

WordPress Galleries are implemented pretty badly and aren't that easy to style. It's probably best to code your own custom solution. This snippet in your functions.php file will hide the gallery settings from the media upload box.

Via Khanh Ly on wp-snippets


<?php add_action( 'admin_head_media_upload_gallery_form', 'mfields_remove_gallery_setting_div' );
	if( !function_exists( 'mfields_remove_gallery_setting_div' ) ) {
 			function mfields_remove_gallery_setting_div() {
			print '
            <style type="text/css">
                #gallery-settings *{
                display:none;
                }
            </style>';
		}
	}
?>
			

Extract Images from the_content();

The Problem The PHP

Trying to work with images in the_content(); is a pain. This exacts them all and places them in their own container.

Via David Vickhoff on wp-snippets


<div class="content-text">
	<h2><?php the_title(); ?></h2>
	<?php
	ob_start();
	the_content('Read the full post',true);
	$postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());
	ob_end_clean();
	echo $postOutput;
	?>
</div>
<div class="content-img">
	<?php
	preg_match_all("/(<img [^>]*>)/",get_the_content(),$matches,PREG_PATTERN_ORDER);
	for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
	echo $beforeEachImage . $matches[1][$i] . $afterEachImage;}?>
</div>
			

Targeting Empty Paragraphs

The Problem The jQuery The CSS

It's pretty easy to end up with empty paragraph tags that mess up that beautiful baseline rhythm that you spent ages perfecting. Although, it is worth considering that maybe sometimes people use them intentionally to space stuff... Use at your own peril!


$('#content p')
	.each(function() {
	var $this = $(this);
	if($this.html()
	.replace(/\s| /g, '').length == 0)
	$this.addClass('empty');
});
			

p.empty {
	padding:0;
	margin:0;
	line-height:0;
}

Targeting Links That Wrap Images

The Problem The jQuery The CSS

Maybe you want to style your links with border-bottom instead of text-decoration? It gives you far more stylistic control and makes the text more readable. You run into problems when images wrapped in links become styled with a border at the bottom which is just plain ugly, lets get rid of it!


$('#content')
	.find('a')
	.has('img')
	.addClass('imgwrap');
			

a.imgwrap,
a.imgwrap:hover {
	border:none;
	background:none;
}

Wordpress Image Styling

What We're Doing The CSS

Let's use all the CSS hooks WordPress gives us to style images the way the user expects. I often like to give my paragraphs to margin-bottom, which leads to images being spaced differently depending on whether they're wrapped inside a paragraph. Lets target both occurances and style accordingly.


.alignleft {
	float: left;
	margin:0 15px 30px 0;
}
.aligncenter {
	display: block;
	margin: 0 auto 30px auto;
}
.alignright {
	float: right;
	margin:0 0 30px 15px;
}
.alignnone {
	float: none;
	display:block;
	margin:0 0 30px 0;
}
.size-full {
	width:100%;
	height:auto;
	margin:0 0 30px 0;
}
p .alignleft {
	float: left;
	margin:5px 15px 30px 0;
}
p .aligncenter {
	display: block;
	margin: 5px auto 30px auto;
}
p .alignright {
	float: right;
	margin:5px 0 30px 15px;
}
p .alignnone {
	float: none;
	display:block;
	margin:5px 0 30px 0;
}
p .size-full {
	width:100%;
	height:auto;
	margin:5px 0 30px 0;
}