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 ‘…’;
}
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’);
