Build A Hollow Box with CSS3

Quick post on just some fun with CSS. I talk too much about WordPress, not that is a bad thing… just thought it would be good to do something different.

In this quick little post, we’re going to build a box with a hollowed out center. Nothing really special, but something fun and fairly simple. Maybe we’ll come back and build on it in a longer post.

Example

See the Pen Build A Hollow Box with CSS3 by Cole Geissinger (@colegeissinger) on CodePen.

The One, Two, Three

Pretty simple really. The only complicated part of this is the use of the :after pseudo element. We’ll get to that in a minute.

First we’ll look at the HTML. A simple empty div with two classes.

<div class="box center-center"></div>

The most important class here is the box class. This is the class we’ll use to style the div into our hollowed box. The second class, center-center does nothing but center the element vertically and horizontally.

Next we’ll work on creating a solid square.  We can do this easily by creating a 200×200 pixel square, but really it can be what ever dimension you want.

.box {
    width:200px;
    height:200px;
    background-color:#DC403B
}

We should now have a solid square. Now the magic begins!. While there are many pseudo classes at our disposal, this is considered a content related pseudo class. Meaning, its specifically here for us to add content after the element without the need of more HTML markup. The code below will add a white square in the middle of our box.

&:after {
    content:'';
    position:absolute;
    top:50px;
    left:50px;
    width:100px;
    height:100px;
    background-color:#fff;
    z-index:2;
  }

Break It Down

First thing to take note here, I’m using SCSS. If you don’t understand SCSS/Sass/LESS, no worries, this is pretty simple, the &:after block in SCSS is same as .box:after. The ampersand basically is a reference to the parent selector it is assigned to. For a more in-depth talk about pseudo classes, check out Chris Coyier’s post about it.

Now that we are past that, we’ll first load in some empty content and absolutely position our new square. We’ll need to do this so we can center our new square. That’s where our top and left positioning come in. We’ll set our new box in half the height and width of our large box.

Of course everything we’ve done so far returns nothing. We’ll want to set the width and height to half of that of our large box. So simply put, if the large box is 200×200, we’ll want a 100×100 box and color it white (or what ever color you need to match the simulation of a hole in the box.

The last little thing here is we’ll set a z-index of 2 to ensure the :after element is on top of the large box. And voilà! We have a hollowed out box created with CSS! Woot!

Now get creative with this as this is just only the beginning :)

Professional WordPress Development Environments

If you haven’t guessed, I do a lot of development on WordPress. Over the past 7 years I’ve been building on WordPress, I’ve come to find the perfect setup to help me really focus on my projects and build fast and efficiently. Of course, this is what I’ve found really works for me and my workflow/skills. While I only work from a mac, this list is based on that and I try to cover any Windows alternatives when possibly. Unfortunately I don’t personally know the good alternatives to some of these tools so I encourage others to share their tried and true alternatives and I’ll update this list! With that said, this is nothing more than my tools/workflow that I felt would be beneficial for other WordPress developers.

Tools

  • Sublime Text 2 (Editor – Free – Multiplatform)
  • SourceTree (Version Control – Free – Mac & Windows)
  • Transmit (FTP – $34 – Mac only)
  • Vagrant (Virtual Machine development environments)
  • iTerm2 (Command Line Too Emulator – Free – Mac only)
  • Alfred (Productivity Application – Free – Mac only)

My tools list is pretty short.. but thats because these tools take care of most of what I need. Let’s explore these tools deeper and how I use them.

Sublime Text 2

While ST3 (Sublime Text 3) is on the horizon, I prefer to use ST2 until version 3 is officially released. But the great thing is what I use for ST2 will be available for ST3 when it’s officially released :)

The biggest reason I love Sublime Text is because it’s built for speed. Time is money in this industry and the less time I can spend futzing with a mouse the better. Sublime features a “fuzzy search” feature which is basically anything you want to configure or open or install is a keystroke away. Maybe I want to open the comments.php file? All I need to do is press Command/Control + P and then type in “comments.php” and hit return! While this seems like it would be harder, and I’ll admit, it is a bit of different mind-set, but you’ll find that typing is 40% faster than visually searching with a point/click action to open files.

The next part is Sublime provides a massive collection of extensions you can install to extend your editor. Here’s a list of extensions I have installed:

  • DocBlockrJS/PHP commenting.
  • EmmetImproves/speeds up HTML/CSS creation.
  • GistCreate Gist snippets straight from Sublime. Great for sharing code snippets.
  • LESSSyntax Highlighting.
  • Phpcs – Inline PHP codesniffer (linter).
  • Search WordPress Codex – Easy way to run a search on the WordPress Codex from Sublime.
  • SideBar Enhancements – Sadly Sublime doesn’t offer extensive contextual menus. This extension fixes that.
  • Sublime Linter – Probably duplicates Phpcs but provides an extensive list of error checking for many languages.
  • SVN – Even though I use Git for version control, at work I need to rely on SVN for code deployment to our host. This plugin simplifies and centralizes SVN into Sublime.
  • Spacegray – Beautiful Sublime Text theme.
  • WordPressDev – Disable/Enable debugging or change databases from Sublime.

While I won’t go into details of the extensions here and their repos or websites outline all of that info in-depth, but thanks to these I’m able to really stay focused in one application for the most part. You can check out the Package Manager for Sublime Text online to see what other extensions you can use. I can make a whole post about this great editor so I encourage you to learn more about Sublime Text 2

SourceTree

I use Git and GitHub. A lot. Pretty much everything I write I push to GitHub for version tracking, collaboration or just as an external backup. While I could gain more nerd points by doing all of this through Terminal, I rather prefer a nice GUI for version control. That’s where SourceTree comes in. This great application can handle Git or Mercurial version control and synchronizes easily with GitHub, BitBucket, Stash and Kiln for storage.

I prefer Git/GitHub but you can choose what ever tool you like best for Version Control. Right now, Git is the bees knees and you don’t want to be a square right? :) Even if you prefer another system besides GitHub, you have a number of others to choose from which is great. If you’re curious what I work on, feel free to check out my GitHub repos.

Transmit

While I actually don’t use FTP that much anymore as I prefer using Git/SVN for deployment systems I occasionally need FTP. Transmit in my opinion is the best out there. You can fight me on that one, but I’m not budging on this. It’s faster with connections and the number of connection types I can do with it out of the box is awesome. I can easily setup connections for Amazon S3, FTP/SFTP and WebDAV.

Not much else to say here, FTP applications are just that. I don’t always use FTP, but when I do, I use Transmit.

Vagrant

I’ve used many development environments and I’ve never really been satisfied. As I’ve dove deeper and deeper into the development world, my setup has required more. If you do basic HTML/CSS, all you need is a browser. But get a server-side language like PHP and you’ll need a server to interpret your code and build your webpages. Go further down the rabbit hole and add in WordPress, now you need a LAMP (Linux, Apache, MySQL, PHP) stack to run WordPress. While there are great systems like MAMP, XAMPP or WAMP, there’s one big issue with these environments. They don’t match our production server where our websites will live.

Every server environment is different. Maybe your server is running Nginx instead of Apache? Or perhaps you can’t use MySQL and Apache and you need to use MongoDB with Node.js instead. Sadly, these easy to install tools just don’t cut it and give a very inaccurate development environment to test on. Enter, Vagrant.

Vagrant is a way to “create and configure lightweight, reproducible, and portable development environments”. Basically, you build the server environment (or someone else already has) that replicates your production server. So, in terms of WordPress, a large majority is using the standard LAMP stack, I would recommend using Varying Vagrant Vagrants (VVV) which is maintained by 10up. They have already taken the hard work of building an accurate WordPress development environment that matches most hosting companies.

If you build for WordPress.com, like I do, then you’ll want to check out VIP Quickstart by Automattic. Since my work is hosted on WordPress VIP, we use Quickstart for our development environment. Both Quickstart and VVV come with a ton of great tools you would need such as WP-CLI to help build comment code or tasks via command line. Last little note, to run Vagrant you’ll need a virtual machine to run the server. I prefer to use VirtualBox for that, but Vagrant supports others too.

iTerm2

I use terminal a lot. If you are not comfortable with command line, I urge you too get familiar with it if you do any kind of development. All the good tools are utilizing this such as node.js, grunt.js, git, svn, vagrant, wp-cli and many others. If you don’t know any of these tools I listed just now, that’s ok. But eventually these will hit your radar. My point here is there are some amazing tools for developers that utilize the command line and it’s important to be comfortable with it. I’m by no means a terminal expert, but I can CL like there’s no tomorrow :)

While the default terminal in the Mac is great, I like things a little more customized to my need. That’s where iTerm2 comes in. I have really tweaked the look and feel and installed some extensions to help my usage in Terminal.

Alfred

Last but not least, I need to be productive on my computer. That’s where Alfred comes in. Just like the fuzzy search in Sublime, I have the same functionality at my finger tips. While I certainly under utilize this great piece of software, I need it and I urge others to use it too. For example, I need to open Sublime Text 2, or even better Photoshop, which I never use unless I’m working on building something from my design department. I could fill the toolbar on my Mac to quickly access it, but if I rarely use it, why clutter my interface? With Alfred, its just a keystroke away. I can now press Option/Alt + Spacebar and type in “Photoshop” and it will open the application. No more searching through my applications for it.

There’s a ton of stuff you can do with Alfred that not even I use.. I can easily do Google searches through it, or use it as a calculator (which will add the results of your equations to your pastebin) and many other fun stuff that I haven’t had time to learn yet.

Conclusion

Again, this is just my workflow and tool set. I’d love to hear what others are doing! We all learn from each other and there may be better tools or systems that will boost our productivity!

Adding Custom Post Types to Omnisearch in Jetpack

omnisearch-jetpackToday I started playing with Omnisearch found in the Jetpack plugin. While this quick tip really just begins to touch the surface of bending this awesome search feature to do our bidding, I wanted to share some findings that I think will help some others.

By default, Omnisearch searches the default post types like pages, posts, comments and plugins. This is cool, but what about our Custom Post Types? There’s plenty of WordPress installs out there with 2, 3, maybe even 15 post types! What about those posts? What if we want to search those too?

Well, thankfully, this is pretty straightforward to add :)

In your functions.php add this code for each post type and the ability to search those is available via Omnisearch. Now, this is only available the back-end of WordPress at the moment. I’m working a plugin that will bring this to the front-end and allow you to customize it further (at least trying to do so when time permits it…).

<?php
    // Add our $post_type_name to Omnisearch!
    if ( class_exists( 'Jetpack_Omnisearch_Posts' ) ) {
        class CG_Post_Type_Omnisearch extends Jetpack_Omnisearch_Posts {
            var $post_type = 'post-type-id-here';
        }
        new CG_Post_Type_Omnisearch;
    }
?>

Quick explanation of the code here. For each post type, we need to create a new inheritance class. Right now, the Jetpack_Omnisearch_Posts class we are extending uses get_post_type_object() which sadly accepts a single post type as a string :( This means, we cannot just toss it an array of post types (which is most ideal).

Anyways, that’s my quick tip for today! I’m off to bed :)

To use this code, just rename the CG_Post_Type_Omnisearch class to something unique for each instance you create and pass the post type id and now you’ll see it in the search results!

omnisearch-custom-post-types

WP Modal Login v2.0 Now Available!

After a few months of working away in my free time, I have officially released version 2.0 of my plugin, “WP Modal Login“.

In this version I made significant improvements over v1 which was kind of rushed out. I didn’t expect to get the kind of traffic/feedback I got so I took some time and listened to what others had to say and made a bunch of new features.

Everything Ajax

The login form not only now handles Login, but it now does user registration (if option is enabled in WordPress Settings) and reset password all with Ajax!

Modal Themes

The plugin now offers three themes to choose from to personalize your login experience. on top of all of that, you can also tweak the CSS all from within the admin area or create your own themes.

Plus many more features!

Check out the demo site and test it out and download!

where-art-thou

Where Art Thou?

where-art-thouFor any of you that have noticed, I’ve been quiet on my site and the podcast seems to have halted?

Well long story short, I’ve been in the hospital since Easter (March 31st) and haven’t been able to produce anything. I’m 100% fine, just had a series of unfortunate events that lead to one thing after another, but we are on the final stretch in getting me back in the wild! So far I’m estimated to be discharged on Tuesday, April 16th.

Besides that fiasco, I’m also in the process of buying a house with my Fiance, which we have been approved for and will be moving into in May. So I imagine I’ll be tied up for sometime before I can post anything fun or get episodes rolling again for the Batch Process podcast.

wimp-web-and-interactive-media-professionalsBesides all that, I got some fun announcements! WIMP is rocking it this year and we’ve got some awemazing programming running. Sadly I had to sit out on our biggest attempt yet, WIMP Gives, which is our first annual charity hackathon for San Francisco Bay Area Non-Profits in need of websites. The event was amazing! We had 6 websites built, a live band, DJ, tech support for anyone in need, and a vote for the best website produced that day that is then donated to the winning non-profit. It was awesome, a great turn out and very rewarding for all involved. Listen out for the 2nd annual next year! Besides that, we have some great monthly topical meetups, this month we have Michelle Murrain talk to us about Version Control with Git, along with some other great topics to be announced very soon!

Next announcement, I’ve been in talks with the organizers at the SF WordPress meetup and I will be doing two things with them very soon, I’ll be presenting at the up-coming SpeedGeek event in May, and in works of doing a talk around June or so. More info on that soon…

Last note, I have a plugin now available in the WordPress plugin repo! It’s tiny little thing, but something I’ve had clients ask for multiple times and I wasn’t satisfied with what was available.. So I made one and put it out there for any one else. The plugin is called WP Modal Login. It offers multiple options you can take to insert a beautiful Modal Login (also sometimes called “Shadow Box” or “Light Box”) to the front-end of your website. The version available now is 1.2, and it’s fairly basic, but since I have so much freaking free time here in the hospital, the last few days I’ve turned out some really awesome features for version 2. So listen out for that! I’ll also have a demo site running soon too for users to check it out before downloading it. I sure like seeing that stuff when I’m shopping for plugins….

Anyways, that’s the gist and madness that has been my life in the past month… I’ll try to get some quick tutorials running soon, but it’s hard to say when that will be. Be patient! I’m still here! Just very busy :)

Custom Message in WP Admin Area

A quick little tutorial.

Recently, I had to leave a warning message on the Reading area of the Settings section on a clients website. Why? Well, the theme was dependent on working as expected as long as a static page was set. Of course, that probably means there’s some reworking to be done on the theme, but it was considerable reworking the client didn’t have a budget for, so we decided the best option is to place a warning message on that page saying, “Don’t Touch!”.

I tried a few scenarios to find the perfect fit for what I needed. Let’s post a little message on the Reading page in the admin area above everything else.

Open your themes functions.php

Paste in this function

function geissinger_reading_warning_message() {
    global $pagenow;

    if ( $pagenow == 'options-reading.php' )
        echo '<div class="error"><h3>WARNING! Do not adjust the "Front Page Displays" options! Your theme depends on these settings!.</h3></div>';
}
add_action( 'admin_notices', 'geissinger_reading_warning_message' );

I’ll admit, this is not the most professional scenario and I’ll probably get some hate mail, but if there is some special reason you need to post a special message on any page within the admin area, this exact code will do the trick. Let’s discuss the code.

We bring in the global variable $pagename which stores the name of the page currently being viewed in the admin area.

We check to make sure we are currently viewing the Reading page and then we display a message using some default WordPress styles like Error, which will give us a big read box above the settings fields. I also set this to use an h3 which is fairly large and bold. Just enough to stick out… obnoxiously..

Anyways, upload your file and you’ll see your error message! If you want to assign this to other sections of the WordPress admin area, reference this list ;)

Settings Page Settings Name
General Settings general
Writing Settings writing
Reading Settings reading
Discussion Settings discussion
Media Settings media
Permalinks Settings permalinks
WooThemes Canvas

Modify Breadcrumbs in Canvas from WooThemes

WooThemes CanvasRecently, at the marketing company I do a lot of custom development for, they signed up for the Theme Club over at WooThemes and I was faced with creating my first child theme based on the Canvas theme. I have always hand-built my themes and my experience with premium themes is minimal, but man WooThemes has some rock star developers on the team there. Anyways, one thing I had to do was modifying the output of the breadcrumbs that is found within the theme. Off to Google we go for a fast answer, right? Low and behold I found nothing? Surely I’m not the only one that has required this customization? All I wanted to do was remove the default “You are here” text and change the separator which was displaying as >.

Today, I’ll show you how to change the output of the breadcrumbs in your Canvas theme without modifying the original source code. I’m assuming you are running a child theme already, which you should be doing, but if you are unsure of what that is I would suggest watching this video from WooThemes on how this works.

Open or create a functions.php

If your child theme doesn’t have a functions.php, go ahead and create one. In you functions.php create a new function called “my_custom_woo_breadcrumbs()“.

<?php
    function my_custom_woo_breadcrumbs() {

    }
?>

Filter the defaults

Now thankfully, WooThemes is so awesome, they provided a way for us to filter the default options in the breadcrumbs without touching or duplicating any of their code. The filter is, “woo_breadcrumbs_args“. We’ll use the add_filter() function with this filter so we can hook in our customizations. Add the line of code below to the end of our function, after the closing curly brace. NOTE: you can also add this before you define the function, but my personal taste is too linear for this method :P

<?php
    function my_custom_woo_breadcrumbs() {

    }
    add_filter('woo_breadcrumbs_args', 'my_custom_woo_breadcrumbs');
?>

Pass our custom defaults

Now that we have that, we are ready to intercept the defaults passed in the “woo_breadcrumbs_args“. This filter passes an array to our custom function called $args, so we’ll want to make sure we pass that through our function and then modify the fields we need. This will allow us to customize only what we need, while the filter retains the other defaults.

<!--?php
    function my_custom_woo_breadcrumbs($args) {
        $defaults = array(
            'separator' =--> '&amp;raquo;',
            'before' =&gt; ''
        );

        return $defaults;
    }
?&gt;

Let’s go through what the above is doing. Inside of $args there is an array called $defaults, I create a new array with the same name and set the parameters that modify the separator and the text that is displayed before the breadcrumbs.

By default, the separator is the greater than symbol, >, but I want it to use the » symbol instead. We will need to change the value of the “separator” key with the required HTML code to display that character.

The next field, “before“, normally outputs “You are here” and I didn’t like that. To me, everyone kind of knows these are breadcrumbs and they show where you are within the website. Verbally saying, “You are here”, is over-kill in my opinion. In our $defaults array we need to overwrite that text with an empty value passed to the “before” key. If you want something else to display here, you can if you feel so.

Lastly, we return the new array and pass it back through the filter and now our breadcrumbs are displaying as desired! I’ll leave you with the set of options that are available in the $defaults array that you can overwrite if you wish. Below is the default settings for the breadcrumbs arguments.

$defaults = array(
	'separator' =&gt; '&gt;',
	'before' =&gt; '<span class="breadcrumb-title">' . __( 'You are here:', 'woothemes' ) . '</span>',
	'after' =&gt; false,
	'front_page' =&gt; true,
	'show_home' =&gt; __( 'Home', 'woothemes' ),
	'echo' =&gt; true, 
	'show_posts_page' =&gt; true
);

CSS3 Box Shadow with SASS and Compass

Today, I’m gonna focus on something else besides WordPress. Although, the techniques here can easily be brought into any WordPress theme as long as you have it configured to use SASS.

I made the switch to SASS about October 2012, and I haven’t looked back. If you haven’t used it yet, you should at least try it out. I followed the tutorials from Web Design Tuts+ and began experimenting with it from there. I cringe now when I’m faced with dealing with plain CSS now.

Let’s sit down together and have some fun!

Resources:

 

buddy-press-logo

Get BuddyPress Notifications Count

BuddyPress!

I have made the dive. I have gone 7 years now developing with WordPress and finally a project has approached me that requires BuddyPress. I’ve heard good and I’ve heard bad… over all, I’m pumped to work on BuddyPress and become best friends ;P

Today’s tutorial is a quickie. Let me share with you a work around I created to fix an issue I was faced with. Earlier today I spent about 15 minutes scouring the interwebs looking for that magical function that will return the total number of notifications the current BuddyPress user has, I am defeated. Surprisingly, there is no core function that returns this, but I know for a fact this functionality exists! Digging deep into the core of BuddyPress I was able to locate a function has a snippet of just what I was looking for.

We’ll extract out some code found in the bp_members_admin_bar_notifications_menu() function in bp-members > bp-members-adminbar.php. This function has only been tested with version 1.6.1, so beware! If things update in the future, I’ll be sure to back track and update this post ^_^

Create the custom function

First we need to open the functions.php file in the root of our theme. And paste in this code.

function cg_current_user_notification_count() {
    $notifications = bp_core_get_notifications_for_user(bp_loggedin_user_id(), 'object');
    $count = !empty($notifications) ? count($notifications) : 0;

    echo $count;
}

Explanations

We first use the BuddyPress core function bp_core_get_notifications_for_user(). At first glance this function would seem to do just what we need, unfortunately it returns too much. All we are looking for is the total number of notifications. This function actually returns a multidimensional array, separating each notification into its own array for the currently logged in user. We’ll store this in a variable called$notifications for use in the next part.

With our array of notifications, we then set another variable that we’ll count each array in our $notifications variable and store the results in a new variable called $count.

Lastly we echo the results of our counted array!

Usage

Now we can just add in our function where we want! I’ll end this quick tip with a bonus too. the below code will use our new function and wrap that in a link to our user profiles so we can view the notifications that are pending ;)

<p><a href="<?php echo bp_core_get_user_domain(bp_loggedin_user_id()); ?>"><?php cg_current_user_notification_count(); ?> - Notifications</a></p>
wordpress-security

Securing WordPress with a Bulletproof Vest

WordPress out of the box is pretty easy to get up and running, install some plugins to extend it’s functionality and focus on writing your next big time blog post. With what WordPress provides out the box, an area over looked by a lot of users running a self hosted WordPress is security.

Now don’t get me wrong, this doesn’t mean WordPress isn’t secure! With any system, security issues always arise in even some of the biggest software manufactures in the world. The excellent team behind this powerful system has a lot of security baked in. There is form sanitization that is available to developers with some amazing documentation on how to harness this power in your custom themes and plugins, they update the core code on a regular basis, notifying all users when there are major security updates required to keep your site secure. These are just some of the basics as far as security goes when applied to WordPress out of the box.

The type of security WordPress doesn’t provide out of the box is the security of your computer and the server your WordPress site is installed on. Over the last few years I have been doing some research on security and have complied a crash course tutorial here on how I go about securing all of my websites, new or existing and I feel are required, good practices for anyone running a WordPress site. In reality, WordPress is secure, it’s the thousands of 3rd party themes and plugins that introduce these issues. Installing any third party theme or plugin can impose security threats if the proper precautions aren’t met.

Now, why should you care? You run a small business that markets to local customers? In my experience, hackers don’t care. I have worked on projects from small mom & pop shops to large networked WordPress Multisite installs geared for community involvement world wide that see daily traffic of 100,000 unique visitors a day. And both of these types of websites get attacked by hackers or bots all the time, trying to get in, to either market something to your users without your knowledge, use your site as testing grounds for fresh hackers, religious based hackers trying to spread a message, and lastly the malicious hacker with the intention of stealing sensitive data. The motivation to hack any website is beyond the usual thought of “They want money”. Some hacking is influenced by black hat SEO and creating unauthenticated back-linking.  The reality is, if your website is up and available for anyone in the world to view, it’s worth any hackers time to try and make some use of your site as they wish.

Ok,  let’s dig in and get working on securing our WordPress sites! Of course, all of these steps are best implemented from the beginning, but a lot of this is a great place to start for an existing site or after dealing with a hacked install.

Harden the Configuration file

First place I start when creating a new WordPress site is with the wp-config.php file. If you haven’t guessed it, this is the configuration file for our WordPress site. There are three major spots of this file.

MySQL Settings

MySQL Settings for WordPressThis may seem like a given, but I don’t know how many times I’ve acquired a site, and found the proper levels of security were not applied to the MySQL Settings section. This section of our configuration file holds the connections to our database, which is essentially the brain of our WordPress site. If anything were to happen to our database, we would lose everything in our WordPress site without a proper backup.

Security is not to be taken lightly here. I try to use descriptive, but yet cryptic naming schemes for the database name, the username and the password. You’ll want to use something descriptive but not too obvious for hackers to figure out for the database name and username. Some hosts when creating these, limit the amount of characters, we’ll want to make sure they are long enough to be used with your hosts requirements.

Set Your SALTs!

The SALTs is a very important part for security and is very easy to set.

If you look in the comment code at the top, you can see they provide a URL that will auto generate the SALTs for you! <3 WordPress. All you have to do is paste that URL into your browser and copy the code they generate for you to paste back into your config.php.

Now, this is all fine and dandy, but what does this do really? These are used for user authentication and form nonces. Let’s say for instance you had a compromise and someone has logged into one of your accounts, you can reset these and that will invalidate all cookies set from user login which will then force everyone to log back in. Giving you a window of time to temporarily disable user login while you correct the issue. Pretty neat and easy ^_^

 Database Table Prefix

The final important setup is the Database Table Prefix. By default, WordPress uses wp_ which is set to the beginning of every table in your database. Hackers love this, and opens a doorway for them to use SQL Injection to corrupt your database or return sensitive data through malicious scripts. Changing the default to something unique will harden your install. If you have an existing website that needs this to be updated, sadly you can’t just change the prefix in here.. You will have to manually update the table names yourself. A discussion on that is a talk of it’s own and is beyond the scope (slightly) of this post. Maybe I’ll revisit that in a later time..

“Cripple” the Admin Account

Back in the day, WordPress always created an admin account and you couldn’t rename it. That created huge issues for stoping brute force attackers as they already had the user name figured out. Since WordPress 3.0, they allowed users to install with an account of their choosing. Now I say, install with an admin account with a secure password still but “cripple” that account. What does this mean exactly? Well, I like to keep the hackers at bay and work for it. What I like to do is install WordPress with and admin account with a secure password. Then I’ll go in and create a new account with administration privileges, login with that account and set the original admin account we created in the install and set it’s privileges to subscriber. This will keep the hackers busy for quite some time, plus if they get in, awesome, now they can update their user profile and all that hard work of brute forcing into the account is wasted ^_^ Send them on a wild goose chase. Just because the account username is admin doesn’t mean they have admin privileges… lol

Plugins

As I said, WordPress out of the box is pretty secure already, but we will need plugins to extend the security of our install and make things more bulletproof. I’ll list out plugins that I use in all of my websites and have been proven to prevent security holes and attacks.

Wordfence Security

http://wordpress.org/extend/plugins/wordfence/

Wordfence is a required plugin. There are security plugins similar to it, but they don’t pack the punch or easy to use interface like Wordfence Security provides. Several years back, I had been brought into a company to analyze some strange javascript that is being displayed in their WordPress websites. They had a handful of single installs on a shared server, and after digging around in their account, I realized they had been hacked through a vulnerability in “TimThumb”. Without going into much detail, TimThumb is a PHP image resizing script and many themes or plugins never updated the script thus opening the door to hackers. My client was hit and hit hard. Every website in their account was infected due to one out of date theme.. Using Wordfence Security on all of their websites I was able to narrow down every instance of malicious code and locate the back door that was injecting the malicious scripts. All of that through Wordfence Security without the need to FTP in.

On top of all of that it provides login security by blocking IP address of brute force attackers, theme and plugin checking and hiding if usernames were correct if a failed login occurs (why WordPress does this.. I don’t understand that..). It will also email you about any security vulnerabilities found in your WordPress core files, themes and plugins. One thing that is fun to experiment with is to tell Wordfence to email you when a user is blocked from logging in. That’s how I learned about the kind of hacker traffic that I get on my different websites and found just how many hackers are still trying to brute force the admin account. Reference the “Cripple” the Admin Account section above to make things really interesting.

WordPress Firewall 2

http://wordpress.org/extend/plugins/wordpress-firewall-2/
Sadly, this plugin recently hit it’s two year mark of no updates… I’m actually in process of finding a comparable plugin but so far I have found no issues with this plugin regardless of it’s developers inactivity. To this day I’ll get notifications about people trying to run SQL Injections or exploiting malicious code on some of my websites.

This plugin will listen for known hacker techniques, block anything that matches them and email you the URL it happened at and what the plugin thinks the attack was. Using this plugin also help teach me about known security vulnerabilities such as the fb_connect vulnerability that will return your username and encoded password

I’ll be sure to update this plugin when i have located something just as good or even better.

TimThumb Vulnerability Scanner

http://wordpress.org/extend/plugins/timthumb-vulnerability-scanner/

As mentioned in the blurb about Wordfence Security, TimThumb is still lingering in some themes and plugins. If you are unsure if your website is vulnerable to this horrible zero-day hack, you can install the TimThumb Vulnerability Scanner. The name says it all really, it scans your WordPress site for out of date versions of TimThumb. The usage is pretty stright foward, you push a button to search and it will report back the version of TimThumb you are running (if it finds it) and will let you know if you are out of date or up to date. This was a huge help for my TimThumb vulnerability to stop any more back doors from being created.

VaultPress

http://vaultpress.com/

What good is an install without any backups? VaultPress will handle that for you and is maintained by the company behind WordPress, Automattic. Now, admitingly, I have not used ValutPress yet because I haven’t had the needed or a client willing to pay for the service. I do have it planned for my personal site but that will be in a little while. At the moment, I have my host running backup for me which I can access at anytime and restore if I need to.

With VaultPress, they also run security checks similar to Wordfence Security. If you are paying for the package that offers security checks, you can run them both I’m sure, but that may just be a bit paranoid. I would suggest you choose between the two and stick with it. In reality you can also push to the basic plan that just offers the backup and restore features and use Wordfence Security to deal with the server checks.

.htaccess tricks

If your WordPress site is running on apache (which most do), you can take advantage of some great tricks in the htaccess file which acts as a remote server configuration file. This is normally found in the root of your website, if it doesn’t exist, you can just create one. Another thing to not is that natively this is a hidden file, so make sure you have your computer or your ftp software set to display hidden files.

Secure sensitive files

The snippets below will make the following pages inaccessible in a browser. By default, technically you can load these files, but for security sake we’ll stop the server from serving our .htaccess and wp-config.php. Just copy and paste these anywhere in your .htaccess file.

# PREVENT ACCESS TO WP-CONFIG.PHP
<Files wp-config.php>
    Order Deny, Allow
    Deny from All
</Files>
# PREVENT ACCESS TO OUR .HTACCESS
<Files .htaccess>
    Order Allow, Deny
    Deny from All
</files>

Hide Directory Indexes

Most good hosting companies will setup your server to disallow user from navigating to a directory in your site which then lists every folder and file inside of it. This can be a bad thing as malicious users can get in there cause some havoc. Let’s prevent that just in case.

# STOP USER FROM VIEWING OUR FILE DIRECTORIES
options all - indexes

Wrapping It Up

In reality, there’s not much to securing your WordPress site. All that I spoke about above is what all of my websites use and since I started implementing these I have prevented security issues ad have been worry free about the security of sites. Of course there are many other things one can do to boost security even further. A good list is from .Net Magazine list 10 simple tricks to secure your WordPress site.

If you have a great security trick that I didn’t list out here, please leave a comment below and share with us!