Blog

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!

Web Designer Depot Mention July 2016

I was very happy and shocked to see my portfolio site mentioned in the renowned web designer depot blog spot for The best new portfolio site, July 2016 spot. Here is what they had to say.

“Chris Cook’s portfolio is simple, largely monochrome, with decent typography. The thing I really like about it, however, is the use of a subtle background pattern. I know that background patterns were basically abandoned along with skeuomorphism, but this is a site that does it right.

I’d like to see more subtle patterns used here, and there. We might even wean ourselves off of our near-complete dependence on huge (and thus slow-to-load) photos.”

Create Bootstrap Grid Layouts Quick and Easy

There are many framework’s out there to choose from, but my favorite by far is Bootstrap grid. Bootstrap provides a quick and easy way to create responsive website layouts. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined classes used for the grid for quickly making layouts for different types of devices like mobile phones, tablets, notebooks and desktops views.

Here are a few examples of what classes are used in different situations.

  • .col-xs-* ( extra small devices like cell phones )
  • .col-sm-* ( small screen devices like tablets )
  • .col-md-* ( class for medium size devices like desktops )
  • .col-lg-* ( for large desktop screens )

View the examples below in Codepen on different browser widths and see how they respond to the sizing. How the div’s stack and align on different size devices will depend on what classes you add to the div’s.

To view a lightweight Bootstrap grid only, click here.

See the Pen Responsive Bootstrap Columns and Rows by Christopher Cook (@cccamuseme) on CodePen.

How To Add Scrolling Parallax Background

In this Tutorial I will show you how to add a scrolling Parallax background to sections of your site. I will also show you how to use Flexbox to center the section’s content.

To make this effect possible we need to use jQuery and parallax.js, remember to call jQuery first before any other scripts in your header.

For my example I setup the sections to alternate backgrounds to show you the effect more clearly. Once you have your js in place all you need to do is give your section class=”parallax-window” with data-parallax=”scroll” and add data-image-src=”you-image.jpg” with your background image.

See the Pen Parallax Background with Centered Content by Christopher Cook (@cccamuseme) on CodePen.

How To Create A Full Page Overlay Menu

Here is a full page overlay menu that is responsive for mobile and is a great way to make your menu stand out. I like this menu for it’s simplicity and it’s use of CSS3 . You see many websites trending toward using off canvas menus instead of using the classic static ones because there are more people use mobile phones and tablets to view their content than ever before. This can help by creating just one menu and not multiple for different devices.

See the Pen Full Page Overlay Menu by Christopher Cook (@cccamuseme) on CodePen.

source: http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

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 Reorder Bootstrap Columns

Bootstrap is a powerful tool for developing responsive templates because of the easy to use grid system. But one feature of the grid that I have not seen explained very well is how to reorder columns based on the breakpoints. The doc’s only explain it in minimal form and don’t explain it in simple terms.

This is how they show it in the bootstrap documentation.


<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

So the most important thing to remember about Bootstrap is that it is built with Mobile First in mind. This is the key thing that many struggle with and have a hard time understanding some features.

So What Is Column Reordering?

Column reordering is changing the order of columns based on the size of the browser or viewport. I will be showing you how to reorder columns based on mobile view to desktop view.

The first thing we want to do is create our page markup for mobile first view like this:


<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div><!-- end row -->

On mobile view, it will show the 9 width column first (top) and the 3 width second (below). On desktop view, it will give us two columns side-by-side, one 9 width column that will be on the left and one 3 width column on the right that will look like this.

9-3-grid

Now we will added some classes so that the 9 and 3 column will swap places when viewed on a desktop or larger viewport.


<div class="row">
  <div class="col-md-9 col-md-push-3"></div>
  <div class="col-md-3 col-md-pull-9"></div>
</div><!-- end row -->

Now as you can see, in the class we are declaring the column size and then telling the column how many rows to push or pull. Since the grid is based in 12 columns we would only need to push-3 for the 9 and pull-9 for the 3. You can use this to reorder divs at different breakpoints and can be used with more than just two columns as well.

Happy Coding!

How To Add A Favicon To Your Website

What Is A Favicon?

A Favicon is a small image that is used as a websites favorites icon. Favicon’s help users find your website in favorites or bookmark bars by quickly recognizing the favicon. Usually company’s will use their logo, abbreviations or something specific to their brand.

favicon-what-is

A favicon can be created as .ico, .gif or .png image files and are 16×16 pixels in size.

Where To Place The Code

Traditionally favicon’s are placed in the root folder of your website (http://example.com/favicon.ico) because almost every browser will look in the root for a file named favicon.ico, but you can place your favicon in any folder as long as you add an HTML link in the sites <head> and have the correct image location (yourwebsite.com/images/favicon.ico).

Here is an example of the HTML code you will want to place in the head section of your site, usually placed below the <title>. Copy the code and paste into the head of your document and replace the .png file name and location with your own.


<link rel="shortcut icon" href="http://example.com/favicon.ico" />
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png">

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