5 Quick Ways You Can Improve Your Sites Design Right Now With the MD Child Theme

[toc]

After working with all kinds of different CMS‘s from around the web, I’ve come to the conclusion that building larger, content heavy sites with WordPress Child Themes is my favorite way to achieve just about any results I want.

Child Themes give you stunning control over the look, feel, and layout of your website (I’ve written a great introduction to child themes here) by giving you access to the underlying files that make up your website.

While Child Themes are a concept unique to WordPress, there are different ways to use them depending on how the Parent Theme is built.

From changing the styles of your site to interacting with under-the-hood components to completely overriding page templates, I want to warm you up to the spectrum of possibilities that can be unlocked through this simple customization process.

Let’s look at 5 quick things you can do to customize your WordPress website with the MD Child Theme.

Already an MD customer? Download the special MD Child Theme from your account to get a jumpstart as well as some preinstalled code snippets.

1) Add Colored Badges Around Your Site With a Simple CSS Style Easy

See that small badge at the end of the headline? These badges are my favorite little design element to add into my Child Themes because of how useful and accessible they are.

You can place a badge like this anywhere that accepts HTML (like in the post editor, widget area, or menu item for example) and make the text say anything you want.

To implement badges into your own site, simply paste this small bit of CSS into your Child Theme’s style.css file:

.badge {
    background-color: #f58f2a;
    border-radius: 2px;
    color: #fff;
    margin-left: 4px;
    font-size: 12px;
    padding: 3px 5px 3px 4px;
    position: relative;
    text-transform: uppercase;
}

…save, and upload the file and you can begin placing badges around your site by writing this small snippet of HTML where you want it:

<span class="badge">New!</span>

See Also You can even make your badges different colors by adding more selectors to your stylesheet like so:

.badge.purple {
	background-color: #9a3ab7;
}

.badge.dark {
	background-color: #2e2e2e;
}

…and then writing the HTML out in plain-English if it helps you remember the code:

<span class="purple badge">New!</span>

If you need to adjust the spacing of the badge and make it align with your text better on-the-fly, you can apply this small bit of inline CSS to adjust the badges vertical position (move it up/down):

<span class="purple badge" style="top: -2px">New!</span>

2) Add Phone Number to the Top Right of Your Header

For local businesses especially, making your phone number as visible as possible is crucial to ensuring your customers and clients can easily get a hold of you on the phone.

A popular place to put your phone number is at the top right of your website in your site’s header. This way it’s in a prominent and easy to reach part of your site for everyone to see.

To add a phone number to the top right of your site, you can go ahead and paste this snippet of code into your Child Theme’s functions.php file:

/**
 * Add phone # to header
 */

function md_phone_number( $items, $args ) {
	if ( $args->theme_location == 'header' )
		$items .=
			'<li class="menu-item header-number">'.
				'<a href="callto://15555551212">'.
					'<b>+1 (555) 555-1212</b>'.
				'</a>'.
			'</li>';

	return $items;
}
add_filter( 'wp_nav_menu_items', 'md_phone_number', 10, 2 );

This code will add a new menu item to the end of your header with a custom CSS class you can use to further style the phone number. Maybe you’d want to add a custom background color like Eco Pest Control did to their design:

3) Create a Speech Bubble Blockquote

Social proof is a great persuasion tool when used in your copy. To make testimonials and quotes look a little more authentic, it’s worth some extra styling to make them stand out. This speech bubble seems to agree:

MD style the blockquote by default, and you can customize it further by adding a cool speech bubble style right to your Child Theme’s style.css file! — Alex Mangini, MD founder

To mimic this style for yourself, paste the following into your stylesheet:

tip: remove the .bubble selector to make all blockquotes bubbles by default.

blockquote.bubble {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	padding: 20px;
	position: relative;
}

blockquote.bubble:not(:last-child) {
	margin-bottom: 39px;
}

blockquote.bubble:before,
blockquote.bubble:after {
	content: '';
	height: 0;
	position: absolute;
	width: 0;
}

blockquote.bubble:before {
    border-color: #fff transparent transparent #fff;
    border-style: solid;
    border-width: 14px;
    bottom: -28px;
    right: 40px;
    z-index: 20;
}

blockquote.bubble:after {
	border-color: rgba(0, 0, 0, .08) transparent transparent rgba(0, 0, 0, .08);
	border-style: solid;
	border-width: 14px;
	bottom: -30px;
	right: 39px;
	z-index: 10;
}

Now, whenever you want to make a blockquote in your posts you can simply use this bit of code to make one:

<blockquote class="bubble">Your own blockquote here!</blockquote>

…to make a more advanced blockquote with a small image aligned to the right, drop this code in instead:

<blockquote class="bubble"><img src="https://marketersdelight.com/wp-content/uploads/2016/04/alex.png" alt="Alex Mangini" height="80" width="80" class="alignright circle" />Your own blockquote here! <small><b>— Alex Mangini, MD founder</b></small></blockquote>

4) Site Tweaks: Remove Unneeded WP Scripts, Static Query Strings, and Enable Widget Shortcodes

One of the first things I do when setting up a new Child Theme is add the following scripts into my functions.php file (or somewhere else). These scripts are meant for improving the utility of WordPress, such as getting better performance out of your site. Let’s break them down:

4a) Remove WordPress Emoji Code

If you look in your sites source code, you may see an ugly JavaScript code towards the top that enables Emjoi support to your site. If you’re like me and don’t think the script is worth loading on your site, you can remove it with these simple actions:

/**
 * Remove WP Emojis
 */

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

4b) Remove Static Query Strings & WP Embed Script

To improve your sites page speed scores, you’ll want to remove and static query strings from your URLs. The first function below takes care of that.

In a nutshell, static query strings prevent resources from being cached and force the browser to download those resources every time. Removing them can improve your overall page performance.

The next function removes the WP Embed script from loading on your page. If you rely on the WordPress embed script to embed custom content, do not add this function to your site.

/**
 * Remove static query strings from scripts
 */

function md_remove_script_version( $src ){
	$parts = explode( '?ver', $src );
	return $parts[0];
}

add_filter( 'script_loader_src', 'md_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'md_remove_script_version', 15, 1 );


/**
 * Remove WP Embed script from frontend
 */

function md_remove_wpembed() {
	if ( ! is_admin() )
		wp_deregister_script( 'wp-embed' );
}

add_action( 'init', 'md_remove_wpembed' );

4c) Make Shortcodes Work in Text Widgets

By default, WordPress disables shortcodes from being used in Widgets. If you’re using a plugin like MD Popups and wanted to place a popup trigger in you’re sidebar, you’ll need to first enable the use of shortcodes in widget areas by placing this simple filter in your functions.php file:

add_filter( 'widget_text', 'do_shortcode' );

5) Hook into your site’s header + footer to add a Favicon and Tracking Scripts

We can debate all day about whether you should add your Favicon and Tracking Scripts into your Child Theme, and while there are plugins that let you do these things, I change them so little that I’d rather not have to see them in my WordPress interface.

Plus it’s surprisingly easy to add a Favicon to your Child theme. All it takes is a single line of HTML to hook into wp_head. Make sure you have the correct path to your Favicon image as well:

/**
 * Add favicon
 */

function md_favicon() { ?>

	<link href="http://example.net/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

<?php }

add_action( 'wp_head', 'md_favicon' );

Now when it comes to adding scripts to your site such as a Google Analytics Tracking code, you may want to consider placing them at the bottom of your site’s footer. The less scripts you load at the top of the page, the quicker your actual content will load.

Here’s how you can hook a tracking script like Google Analytics to your site’s footer with the wp_footer hook (you have to get the script from your provider then paste it in:

/**
 * Add Google Analytics Tracking Code to site footer
 */

function md_inline_js() { ?>

	<script>
		// google analytics tracking code
	</script>

<?php }

add_action( 'wp_footer', 'md_inline_js' );

That’s a Good Start—What will you do next?

Child Themes can single-handedly unlock the true power of your website and if you know what you’re doing, you’ll be able to make some big changes in record time.

My goal with this article was to give you some easy snippets of code you can paste into your Child Theme to get instant results as well as familiarize you with working inside the Child Theme environment.

I’m going to be writing a lot more about Child Themes on the blog and I’d love to hear from you about your biggest struggles using them. Leave a comment below and tell me what you’d like to learn and I’ll do my best to incorporate it into a tutorial everybody can learn from.