How To remove default elements in Visual Composer

Visual composer can be a little overwhelming with all of the options and elements available. So here I will show you how to remove default elements that you may not be using to help cleanup the elements grid. Add the code below to your functions.php file. You will notice a list of the things I excluded in this example, these are elements that I am removing using their short-code value.

Tip: To find out an elements short-code simply add the element and then switch to classic mode to see the short code value.

Use Featured Image as Background Image in WordPress

To use your WordPress featured image as a background image, simply use the code below. Place the first line after your header call and add the style to the div you want. make sure to style your div properly to your liking.

Additionally, we can use what we created above but tweak it a bit. Here we will add a fallback background image in the mix just incase something goes wrong with a media file or someone forgets to add a featured image. As you can see we are linking to an image located in a “images” folder in your theme.

Happy coding!

Reduce HTTP Requests in WordPress

WordPress can be fickle when trying to speed it up, especially if you are using more than a handful of plugins. So to help with the performance we can reduce some requests by disabling some things in WordPress that we may not be using.

Disable Emoji’s

If you’re not using emoji’s on your site then lets not load them and reduce an HTTP request. Add the code below to your functions file.

/** 
* Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
* Filter function used to remove the tinymce emoji plugin.
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}


Remove Embed

The embed script simply auto formats pasted content in the editor like videos or tweets, so if you do have a use for this leave this out. Add the code below to your functions file.

// Remove WP embed script
function speed_stop_loading_wp_embed() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
}
}
add_action('init', 'speed_stop_loading_wp_embed');

Remove Query Strings

Most often scripts in WordPress will end in a number, this number is their version number (ver=1.1.2). This can prevent the scripts from caching so lets just remove them. Add the code below to your functions file.

/**
* Remove Query Strings
*/
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Happy Coding!

How To Create A WordPress Widget Area

To create or add additional WordPress widget areas or sidebars to your WordPress website or theme its as simple as adding some code to your themes functions.php file. Now, as I always say you will first want to make sure you are editing your child theme (if using update-able theme) and if you do not have one then i recommend you create one.

Once in your theme, edit your functions.php file and add the code below. This will add an additional widget area to create a new or secondary sidebar you can use anywhere on your site. once saved you should now see the new widget area under appearance / widgets.

Now that you have created a new widget area you can place the widget area anywhere in your WordPress theme be using the example below.

To place your new sidebar or widget area in your theme using a shortcode, checkout the amr short code any widget plugin.

Happy Coding!

How To Improve Your WordPress Security

We all know that having your website hacked is not fun and can be down right frustrating knowing that it could have been prevented with some simple tips.

1. Secure Hosting

Finding a cheap hosting provider can be great on the wallet but it probably won’t be the most secure when it comes to security. Do your research and make sure you choose a hosting company with a good track record. Hopefully it has backup/restore and firewalls in place to help secure the server. When it comes to hosting the old saying “you get what you pay for” comes to light. It’s worth paying a little more to know your website is in good hands.

Here are few good hosting companies that are popular:
Blue Host
Media Temple
Host Gator

2. Keep up with updates

All of those updates for WordPress core, plugins and themes are there for a reason and security is a big one. If you do not keep everything up to date then you are leaving your website open to security vulnerabilities and attacks. So keep your site updated and have multiple backups just in case you have issues with updates not playing nice with one another.

3. Do not use admin as your username

Until version 3.0, installing WordPress would by default use the administrator username as “admin”. Now WordPress will ask you what username you would like to use but many will still use the username of admin out of old habits or ease to remember. This will leave your site open to malicious brute force attacks and with a weak password in place, you are just asking for your website to be hacked.

To change the username simply create a new administrator account and delete the old one.

4. Harden your backend

Make these quick edits in the WordPress backend to help secure your website even more.

Prevent access to all of your directories: (place in .htaccess file)


#Prevent folder browsing
Options All-Indexes

Protect your wp-config file: (place in .htaccess file)



order allow,deny
deny from all


Hide your WordPress version: (place in functions.php)


/* Hide WordPress Version */
function remove_version() {
return '';
}
add_filter('the_generator', 'remove_version');

Hide login error messages: (place in functions.php)


/* Hide Login Error Messages */
function wrong_login() {
return 'Wrong username or password.';
}
add_filter('login_errors', 'wrong_login');

5. Install Security plugins

On top of these tips you should always have a security plugin installed and up to date. I also recommend using more than one security plugin to help tighten security even more. Here is a list of popular and trusted plugins to get you started.

6. Backup your website

Lastly, make sure you have multiple full backup’s in place just in case something happens. With these backup’s on hand you can quickly restore your website to working order.

For automatic backup’s and restore I recommend using UpdraftPlus Backup and Restoration plugin. It is very simple to use and you can schedule automatic backup’s and choose where to store them. If you need to do a restore, they have a one click restore function as well.

Happy Coding!

How To Create A Child Theme In WordPress

Many people using WordPress have heard the term child theme, or have come across themes that utilize child themes but might not understand what a child theme really is. I will explain this in simple terms and how to create one when developing and or customizing your theme.

What Is A Child Theme?

A child theme is a miniature version of your main theme, but WordPress will use whatever files that are in your child theme folder before your main theme. This gives your child theme hierarchy, this is why you always want to use a child theme when customizing. For example, lets say you have been working on customizing a theme you purchased from themeforest.net and after weeks of customizing and countless cups of coffee, the theme decides to roll out an update. You say “Sweet” and without thinking quickly update the theme and cannot wait to see the new changes. Then a few minutes later , you find that the update wiped out all of the changes you made because the update overwrote the theme files you have been tweaking to your liking, Ouch.

By creating a child theme, you create a set of separate files that you can use to customize the theme without ever affecting the original theme. Not only does this make updating a theme stress free, it also makes sure that you will never ruin your original theme as you are never actually modifying those files.

Quick & Easy Child Theme

The quickest and easiest way to create a child theme is to use a plugin, and the plugin I prefer to use is One Click Child Theme or Child Theme Wizard. The plugins are very easy to use, and will give you a simple child theme structure to build upon. Some other plugins I have used are just not as simplified and straight forward as these.

Simply download the plugin, install and activate. Next you will use the plugin to name and create you child theme, but make sure you activate your new child theme before starting any customization.

Note

You will copy any files that you will be editing from your original theme, into your child theme. Remember that WP will check for files in the child theme first, then the original theme if the needed file is not found. This gives the child theme authority over the original theme when the child theme is activated.

Tip: If you are not sure what file to edit, use the plugin What The File to find out what file is being used on every page.

Child Theme Resources