Taking too long? Close loading screen.

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