Upcoming SEO classes

For everyone who wants to know how to drive more visitors to your website, over the next 6 weeks there will be a series of three evening classes on the topic of Search Engine Optimization (SEO) and using Google Analytics.

These classes will be taught by Sandi Chevalier-Batik, Nick Batik and Jackie Dana. All classes will be held at Cospace.

Session One: May 17th, 7 pm – 9 pm

  • Keyword Research
  • Competitive Analysis
  • Configuring Your WordPress Site for SEO

Session Two: May 31st, 7pm – 9 pm

  • On-site Content Optimization
  • Link Building and Online Promotion

Session Three: June 21st, 7 pm – 9 pm

  • Understanding Website (Google) Analytics

For more information and to sign up:

Security – Backing-Up Your Site

This entry is part 4 of 4 in the series WordPress Security

Install a plugin or use cronjob to create database and file backups on a regular basis. This may not be directly related to security, but in case you detect intrusion, you will be glad you make a backup.

I personally like BackWPup.

Security – Locking Down Your Site

This entry is part 3 of 4 in the series WordPress Security

Hide WordPress Version in the Header Tag

Although you have deleted the WordPress version meta data from your theme, you may still get WordPress version line in the page returned by the blog software. The culprit is, since version 2.5 WordPress has added the feature to generate this code.

Add the following line to the functions.php file in your theme directory: (Create a blank PHP file with this name if your theme doesn’t already have one)

<?php remove_action('wp_head', 'wp_generator'); ?>
It is important to note that even with all of those above implemented, there is no guarantee that your blog will be safe. Just that you decrease the chance tremendously and discourage those crackers from targeting your blog.

New exploits are discovered every so often and when a fix has not been made available yet, everyone is at risk. However, by implementing all or some of the tips above, at the very least it should give you peace of mind that you are not leaving your house unlocked.

I recommend the plugin Better WP Security which is easy to use and configure, and does many of the security functions for you.

Security – Proper WordPress Installation

This entry is part 2 of 4 in the series WordPress Security

Change The Default “Admin” Username

The problem
Brute force is one of the easiest ways to break a password. The method is simple: try as many different passwords as possible until the right one is found. Users of the brute force method use dictionaries, which give them a lot of password combinations.

Knowing your username makes it easier for them to guess the right combination. This is why you should always change the default “admin” username to something harder to guess.

Versions of WordPress starting with 3.0 let you choose your desired username by default, so there should be no excuse for not doing it right. If you have a site that was created with an older version, Admin renamer extended.

Pick Secure Password for Admin

Changing your admin username to something else is not a guarantee that people will not be able to guess it. For instance, if you use your username as the displayed meta data in every post, or you enable author specific page in multi-author blog, you will reveal your user name to the world.
With that assumption, you should pick secure password for your WordPress login. Combine upper and lowercase characters and numbers.

You can change your password after your site is installed. You may even want to to change it on a regular basis. I recommend the plugin WP Security Scan because it has a password generator.

Populate wp-config.php Properly

Go through each line in wp-config.php, not only the first block for database configuration.

Use WordPress secret key generation tool to generate random salts for WordPress cookies. These keys are used to insure better encryption of information stored in WordPress user’s cookies.

There is an automatic generator for these at: https://api.wordpress.org/secret-key/1.1/salt/

You also want to modify the WordPress table prefix to something other than wp_. Adding random characters and numbers to the end of wp, such as wpRbX3i_ obfuscates it enough but still allows you to recognize the tables as those belong to WordPress.

Security – Prevent Directory Browsing

This entry is part 1 of 4 in the series WordPress Security

By default, most hosts allow directory listing. Because there are a standard set of directories in a WordPress installation, the hacker can go directly to the directory inside your site and see all of the files in that directory. This is definitely a security risk, because a hacker could see the last time that files were modified and access them.

This is a simple but important problem to fix. You have three options:

  1. Place an empty file in each directory with the name INDEX.HTML or INDEX.PHP
  2. If you are using an Apache webserver, modify your .htaccess file
  3. Use a Security plugin (see the end of the series for suggestions)

 

Security – The Mind of a Hacker

In class I will show you a few of the ways a hacker finds vulnerabilities in websites.  I will not include that information here because all I want to do is illustrate the no one is immune, not teach you how to hack.

Most often hacking is a crime of opportunity – like an open gate or unlocked car door. In general the hacking process involves three steps:

  1. Find a point of entry
  2. Compare the website / server information to know vulnerabilities
  3. Have fun

The hacker doesn’t even have to know what he or she is doing. There are many programs that can be found on hacker sites that go through this process automatically. Thesw are popular with novice, juvenile, or dilitante hackers. Because they often don’t require any sophisticated understanding to operate, the people who use them are held in very low regard by the “real” hacker community, and are referred to by the derrogitory term “script kiddies.” That does not mean they can’t do some very real damage to your website.

The important point to understand is that these individuals are not targeting your website – you are just one of thousands. It is strictly a numbers game, and some day yours may come up.

In this next piece we will look at a common point of entry for hackers.

DiY content slideshow in WordPress

Content rotators or faders are everywhere, it seems. There are several plugins for WordPress that enable this on your site. In the mix, there are some very useful & handy ones. Dynamic Content Gallery, WP-Cycle, and WP-Rotator are three excellent slideshow plugins that I have used and are in my go-to list of WordPress plugins. That said, there always seems to be something that I don’t need or that I wish I had in one of these plugins. That’s when I look to writing my own custom slideshow tool using some WordPress code, CSS, and javascript to do exactly what I want.

There are three steps in this process:

  1. Write the query to grab the content. This is a custom Loop. Nothing really fancy there.
  2. Write the CSS to style the content.
  3. Include and write the necessary javascript to make it behave the way we want.

Writing the query

I believe it’s best to write the query in its own php template file. I created a file in my theme’s directory called slider.php. All my code for the custom Loop and the output will go here. Edit slider.php and add this code:

<div id="featured"> <!--The main container for our featured content -->
<?php
$featured_query = new WP_Query('cat=3&showposts=5'); // We create the query. Grab the 5 most recent posts in the category ID '3'
while ($featured_query->have_posts()) : $featured_query->the_post(); // Start our Custom Loop
$do_not_duplicate[] = get_the_ID(); ?>

<div class="featuredcontent">
<?php the_post_thumbnail( 'Featured_Slider' ); ?>
<div>

<h3><a href="<?php the_permalink() ?>">?php the_title(); ?></a></h3>

<p><a href="<?php the_permalink() ?>"><?php get_the_excerpt(); ?></a></p>
</div>
</div>
<?php endwhile; ?>
</div>

In the beginning of the code, we create a new query:

$featured_query = new WP_Query('cat=3&showposts=5');

You can customize this to your needs – I advise reading up on query_posts and wp_query in WordPress’s Codex.

After we create our new query, we output the results. In our case, we show the Featured Image, the title and the excerpt, both linked to the Post’s permalink. Slider.php is included in my theme using the get_template_part(); template tag in my index.php file. Place get_template_part(); where you want the slider to appear:

<?php get_template_part('slider'); ?>

The CSS

Now we need to write some CSS rules to format the content for our slider:

#featured {
position: relative;
z-index: 1;
height: 420px;
margin-bottom: 1.3em;
background-color: #000;
}

#featured .featuredContent {
overflow: hidden;
float:left;
width: 640px;
height: 420px;
}

#featured .featuredContent .featured_text {
position: absolute;
top: 310px;
width: 620px;
height: 100px;
padding: 10px 0 0 20px;
background-color: rgba(0,0,0,0.8);
z-index: 2;
}

#featured .featuredContent h3 {
color: #fff;
margin: 0 0 0 0;
}

#featured .featuredContent h3 a,
#featured .featuredContent h3 a:visited {
color: #fff;
font-weight: 800;
font-family: Helvetica,San-serif;
text-decoration: none;
}

#featured .featuredContent p {
color: #fff;
margin: 0 0 0 0;
font-family: Helvetica,San-serif;
font-size: 0.9em;
line-height: 1em;
}

#featured .featuredContent p a,
#featured .featuredContent p a:visited {
color: #fff;
text-decoration: none;
}

Make slider go fast now

We’ve created our new query, we’ve styled its content, now we add in the behavior – the sliding, fading, etc. The first example is a bit of javascript, using jQuery, that makes the divs with the class of featuredContent fade in & out. The second example uses jQuery Cycle. Both examples require you to enqueue WordPress’s included jQuery and an external javascript file you’ll create in your theme’s directory.

First, how do you properly load jQuery and your external javascript? If you add script tags in your theme’s header, you run the risk of loading javascript twice & possibly conflicting with javascript loaded by a plugin. The proper way to load javascript is to use the wp_enqueue_script function.

In your theme’s functions.php, add this code:

add_action('init','my_scripts');
function my_scripts() {
wp_enqueue_script(
'my.js',
get_bloginfo('template_directory') .'/js/my.js',
array('jquery'),
'1.1',
false
);
}

You can repeat the wp_enqueue_script function for other scripts you need to load.

For both examples, I created a file in my theme’s directory called my.js. This is where we write any custom javascript.

A simple fader using just jQuery

This example calls jQuery, then runs a script which fades the .featuredContent divs.

jQuery(document).ready(function($) {

var jS = $('div.featuredContent');
jS.hide(); // not needed if css hides elements initially
var i = 0;
function do_ticker() {
jS.eq(i).fadeIn(500, function() {
var me = $(this);
setTimeout(function() { me.fadeOut(500,
function() {
i = ++i % jS.length;
do_ticker();
});
}, 5000); // setTimeout
});
};
do_ticker();

});

The first and last lines load jQuery, in-between goes our custom javascript.

var jS = $('div.featuredContent'); //the element that's fading in & out - div class="featuredContent"

jS.eq(i).fadeIn(500, function() {
var me = $(this);
setTimeout(function() { me.fadeOut(500,

//500 is the duration of the transition in milliseconds (half a second) - how long both the fadein & fadeout take


}, 5000); // setTimeout in milliseconds (5 seconds) - how long each slide is visible

Why use the custom jQuery code instead of an effects plugin like jQuery Cycle? 1) You just want a fader, nothing more. 2) You want to minimize the amount of code you’re loading. That said, if you need some flexibility in the transitions, something like jQuery Cycle might be best.

Using jQuery Cycle.

jQuery Cycle is a slideshow plugin for jQuery that lets you use many different types of transitions – not just fading. To use it, we need to do two things differently:

1) load jQuery Cycle using wp_enqueue_script.

2) write some custom javascript.

Using our my.js file, we replace the custom javascript with this:

jQuery(document).ready(function($) {

$('#featured').cycle({
fx: 'fade', //replace fade with other transition types to use different effects
speed:500, //how fast the fade takes place
timeout:5000 //how long each slide stays on screen
});

});

You’ll want to load jQuery Cycle before you load your custom javascript.

add_action('init','my_scripts');
function my_scripts() {
wp_enqueue_script(
'cycle',
'http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js',
array('jquery'),
'1.1',
false
);
wp_enqueue_script(
'my.js',
get_bloginfo('template_directory') .'/js/my.js',
array('jquery'),
'1.1',
false
);
}

You’ll notice we’re loading jQuery Cycle from Github. If you want, you can place a copy in your theme’s directory and include it from there, as we do with my.js.

There we have it. A custom query, some CSS, and some javascript and you have a customized content slideshow in your WordPress theme. At the May Austin WordPress Meetup, I presented this using TwentyTen as the base theme. I’ve zipped that copy of TwentyTen with the custom code included. Enjoy!