WordPress Tips & Tricks for Developers

June 25, 2018
2 min read

My day job at FHOKE is writing HTML, CSS, JS and PHP for WordPress themes. Sometimes we do Shopify stores, but 90% of our work is centered around WordPress.

Over the last 3 years I’ve learned a lot about how to maximise a WordPress theme, so my main goal has been to streamline the creation of new themes.

In that time I’ve developed an in-house solution we use for all our themes, we call it Slate. As a result from years of tweaking it’s now our default basic WordPress starter theme. It has all the bits we need from project to project, which is especially helpful when we’re building 3 – 4 new themes a month.

Below I’ve collected a load of snippets you can use to hopefully improve your own themes.

1.) Remove Extra <br> and <p> Tags in Shortcodes

When you start making your own shortcodes, you’ll discover what a pain it can be. Mostly due to the the_content filter adding extra paragraphs and line breaks inside your shortcode which can mess up the formatting of your custom HTML, therefore you’ll need the following to fix that:

function fix_shortcodes($content) {
	$array = array (
		'<p>['    => '[',
		']</p>'   => ']',
		']<br />' => ']'
	);

	$content = strtr($content, $array);

	return $content;
}

add_filter('the_content', 'fix_shortcodes');

2.) Change The Excerpt Length and Text

It’s usually one of the first things you’ll do when developing a WordPress theme. Changing the default excerpt length and suffix text really helps give it that extra bit of customisation and fit better with the design you’re working to.

//---- Change excerpt length
function excerpt_length($length) {
	return 40;
}

add_filter('excerpt_length', 'excerpt_length');

//---- Add "..." at the end of excerpt
function excerpt_more($more) {
	return '&hellip;';
}

add_filter('excerpt_more', 'excerpt_more');

3.) Remove Wrapping Paragraph Tags on Images

There are times you’ll want extra control over the styling of your posts because by default the WordPress TinyMCE editor wraps all images in paragraph tags. So, Here’s how to remove them:

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

add_filter('the_content', 'remove_p_tags');

4.) Allow SVG Upload

WordPress doesn’t allow SVGs to be uploaded into the media library by default, therefore you may have an issue if you’ve moved on from 2x PNG icons. However with the following piece of PHP you can get the media library accepting them in no time.

function mime_types($mimes) {
	$mimes['svg'] = 'image/svg+xml';

	return $mimes;
}

add_filter('upload_mimes', 'mime_types');

5.) Add Custom Post Types to The Dashboard

On the dashboard of every WordPress site there’s a widget called “At a Glance”. It shows you how many posts are listed under each of the default post types (Posts and Pages)…but would probably be better if you could add your own, right? You can also add your own CPTs to that widget like so:

function dashboard_glance_items() {
	$args = array(
		'public'   => true,
		'_builtin' => false
	);

	$output     = 'object';
	$operator   = 'and';
	$post_types = get_post_types($args, $output, $operator);

	foreach($post_types as $post_type) {
		$num_posts = wp_count_posts($post_type->name);
		$num       = number_format_i18n($num_posts->publish);
		$text      = _n($post_type->labels->singular_name, $post_type->labels->name, intval($num_posts->publish));

		if(current_user_can('edit_posts')) {
			$css_class = $post_type->name;
			$name      = $post_type->name;

			echo "
				<li class='post-count $css_class-count'>
					<a href='edit.php?post_type=$name'>
						$num $text
					</a>
				</li>
			";
		}
	}
}

add_action('dashboard_glance_items', 'dashboard_glance_items');

6.) Change The Footer Attribution in The Admin Area

At the bottom of every WordPress admin page there’s a line of text that says “Thank you for creating with WordPress“. If you’re developing sites for clients, it’s can sometimes handy to change that text because it connects your name with both the front and back-end of the site. Here’s an example:

function admin_footer_text() {
	$output  = '<span id="footer-thankyou">Website by <a href="https://sebkay.com" target="_blank">Seb Kay</a>.<span>';

	echo $output;
}

add_filter('admin_footer_text', 'admin_footer_text');

7.) Add a Custom Help Widget to The Dashboard

You can add a custom widget to the dashboard to help your client get in touch if they have any questions about the site you’ve built for them, consequently making them feel more valued because of the easy support:

//---- Create content for widget
function dashboard_help() {
	$output  = '<p>Need help? <a href="[email protected]?subject=Support" target="_blank">Email me</a> with any questions and I\'ll get back to you ASAP!</p>';

	echo $output;
}

//---- Add widget to dashboard
function dashboard_widgets() {
	add_meta_box(
		'custom_help_widget',
		'Theme Support',
		'dashboard_help',
		'dashboard',
		'normal',
		'high'
	);
}

add_action('wp_dashboard_setup', 'dashboard_widgets');

8.) Make Shortcodes Work in RSS

By default shortcodes aren’t be processed in the WordPress RSS feed, therefore you’ll need the following trick to get them displaying properly:

add_filter('the_excerpt_rss', 'do_shortcode');
add_filter('the_content_rss', 'do_shortcode');
add_filter('the_content_feed', 'do_shortcode');

In conclusion, I hope the following tips and snippets help you going forward!

If you’ve got some good examples of things you put in your own starter themes, let me know in the comments because I’m always open to suggestions!

Comments

Comments (1)

Arty

June 27, 2018 at 12:36 pm

Thanks, these are awlays useful.

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.