BlogCrafted » Tutorial

Tutorial Triplicate — Handling Permalink Changes and 301 Redirects

Ms. Crafty — Wed, 02 Jun 2010 10:00:35 +0000

If you’ve been thinking about changing the permalink structure on your blog or already changed it and are trying to figure out what to do with your internal links, then this trio of pages I just created will help you out.

First, a tutorial on using the Redirection plugin to remove dates from incoming links. Not only do you want people clicking on the links to be able to find your site, you want your posts to rank like they did before. This method uses a 301 redirection to pass on the link juice and the visitors.

Second, a tutorial on removing the dates from your internal links. Though the redirection you’ve already set up is enough, having your links to yourself look right isn’t a bad idea. It also means that if the Redirection plugin breaks or you turn it off, your internal links still work

And third, for people who’ve just migrated over from Blogger, a tutorial on removing the .html from Blogger permalinks and otherwise straightening them out. If you also want to remove the dates, do this before doing the other two.

Happy regexing!

Find LunarPages MySQL Database IP Address

Ms. Crafty — Tue, 16 Feb 2010 10:00:24 +0000

Most shared hosting services store your files and databases on a the same server with the same IP address. However, LunarPages has recently stopped that practice and keeps some people’s databases on different servers with different IP address. This makes it more difficult to install Wordpress on LunarPages.

If you’re a LunarPages customer and trying to figure out what the IP address of your databases is, it’s very likely NOT the same as the IP address of your Lunar Pages Control Panel (LPCP).

How to Find Your MySQL Database IP Address on LunarPages

Go to the main page of your LPCP and scroll down to databases.
Click on PhpMyAdmin (sailboat icon on the right side).
It may ask you to fill in your login information again, do so.
Now you’re in phpMyAdmin for your hosting. Though the url in your address bar still has the same IP address as your LPCP, the very top of the page will say Server: 229.237.233.32 (only your IP address).

Here’s a screenshot of what this looked like for one client, but with most of the IP address blacked out for privacy:

It’s at the very top of the page, a little bit left of center. You’ll see that it probably shares many of the same digits as your LPCP IP address, but it’s got a few different ones too. If it’s identical, then your database & files are on the same server.

You can use this IP address it fill in the DB_HOST field in a wp-config.php file for Wordpress (replacing localhost) or wherever else you need the IP of your MySQL databases on LunarPages.

How to Handle Comment Spam Akismet Doesn’t Catch

Ms. Crafty — Fri, 23 Oct 2009 20:57:20 +0000

Recently, a number spam bots have been managing to get past Akismet to leave nonsensical comments with no actual link. Instead the link has read http://link with no .com. It seems likely that these bots are attempting to get these fake comments accepted on blogs so that when the same bots leave comments with links, they’ll be 2nd time commenters. People have reported a great deal of frustration at having these comments show up and sit on their blogs until they get a chance to mark as spam.

Here’s how you can either send these comments to your moderation queue or even send them directly to your spam. If you are reasonably certain that no one else will be leaving a valid comment on your site with http://link, then you might as well sent it to spam. If you’re worried that a real comment might left with http://link in the link, field, then there’s a way to sent it to moderation instead.

Sending These Spam http://link Comments to Spam

There’s a manual way to send these comments to spam, at least until Akismet picks up on them.

1. Navigate to Settings -> Discussion.

2. Scroll down to Comment Blacklist. You’ll see a box that looks like the one below (click image to enlarge). Enter http://link and save (bottom of the page). This way, any comment that leaves http://link as its link will get sent straight to your spam area, it won’t show up in your comments and you won’t even have to moderate it.

Sending These Spam http://link Comments to Your Moderation Queue

Using this method will mean you still have to moderate the comments, but they won’t show up on your posts.

1. Navigate to Settings -> Discussion.

2. Scroll down to Comment Moderation. You’ll see a box that looks like the one below (click image to enlarge). Enter http://link and save (bottom of the page). This way, any comment that leaves http://link as its link will get sent straight to your spam area, it won’t show up in your comments and you won’t even have to moderate it.

Using This Method on Other Spam

Most Wordpress users rely on spam killing plugins to keep unwanted comments off our blog. But sometimes the plugins aren’t smart enough or haven’t yet adapted. You can use this method for all kinds of things.

Got regular commenter who always needs comments edited or at least looked over before they’re posted? If they always use the same e-mail address, just put it in the Moderation or Blacklist box, depending on the approach you want to take.

Got an unwelcome commenter from a particular IP address? Put the IP address in there. (Won’t stop them commenting from different IPs.)

Got a commenter who always uses the same offensive terms, such as “whore”? Put them in there.

These fields are a great way to either keep a tighter rein on your blog’s comments by moderating certain kinds or to set and forget and send some comments to spam every time.

Tutorial: Adding Gravatars to Cutline Themes

Ms. Crafty — Mon, 13 Apr 2009 11:00:11 +0000

Note, I have since transitioned to Thesis, but the tutorial still works great for Cutline.

Despite the growing internet presence of Chris Pearson’s Thesis, his older themes still remain popular, including the Cutline theme which I’ve modified for this blog.

I recently decided to add gravatars to my theme, so I launched a search for anyone’s tips on best positioning of the gravatar code within Cutline. Since I didn’t find anything, I did it on my own–but I thought I’d share with you exactly which code to put where to get gravatars on Cutline positioned like mine. As a bonus, a small section at the bottom shows you how to create a add a custom default gravatar for your site. You’ll see that commenters without gravatars get a ghosted black-and-white BC avatar.

Inserting Gravatar Code into Cutline Comments

1. Inserting the code into comments.php.

a) Navigate to Theme Editor and open comments.php.

b) Scroll down to

c) Insert

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

directly before

d) The result should look like: &amp;lt;?php if(function_exists(‘get_avatar’)) { echo get_avatar($comment, ‘50′); } ?&amp;gt;

e) Save.

(Note, if you want your gravatars to be bigger or smaller, change the ‘50′ to ‘40′ or ‘60′ or whatever size you want.)

2. Styling the avatars in style.css or custom.css.

a) If you’re playing by the Cutline rules and have made all your changes in the custom.css stylesheet (or haven’t yet made any changes), open custom.css. If you’ve already hacked style.css to shreds anyway, open style.css.

b) If you’re in custom.css, insert the following line:

.custom #comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }

If you’re in style.css, insert the following line:

#comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }

c) Save.

This will style your gravatars with 4 pixels of padding on either side, then a 1px light-gray border, then a left/right margin to set them off. They’ll sit on the top left of your comments and the comment will wrap around them.

3. Turning on Gravatars.

Now your theme is set up for gravatars, but they may not be turned on. Navigate to Settings -> Discussion and enable gravatars, select the highest rating you’ll display, and choose a backup. Save those settings and watch the gravatars show up in your comments section.

Adding a Unique Default Gravatar

Now that your site has gravatars, you’ll find out just how many of your commenters don’t have them. You can select a mystery man, the gravatar logo, a blank space, or some randomly-generated icons to fill the space. Or you can create a special gravatar for your site. For example, I took the BlogCrafted gravatar, turned it black-and-white, and ghosted it. It shows up when people leave comments and aren’t signed up with gravatars, that’s what shows up for them.

Turns out that adding a gravatar that’s unique to your site isn’t hard at all. First you have to come up with a default avatar. In my example, it’s saved as defaultgravatar.jpg. If you use a different filename, be sure to change that in the code.

Upload the gravatar to the images folder of your theme directory (in Cutline, it’s called “images,” if your theme is different, please modify the code below to reflect its image folder name).

Then back in the Theme Editor area, navigate to functions.php (called Theme Functions). Directly under the:

if ( function_exists('register_sidebars') )
    register_sidebars(2);

paste:

add_filter( 'avatar_defaults', 'newgravatar' );  

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/defaultgravatar.jpg';
$avatar_defaults[$myavatar] = &amp;amp;amp;amp;amp;quot;Unique Default Gravatar&amp;amp;amp;amp;amp;quot;;
return $avatar_defaults;
}

The only things you might want to change in this code are:

1) make sure the image location /images/defaultgravatar.jpg is the same as your image’s location. In this case, it’s in the images folder of your theme and called defaultgravatar.jpg. Make changes as appropriate.

2) “Unique Default Gravatar” can be changed to whatever you want to call it.Don’t delete the quotation marks or the semi-colon that comes after.

Otherwise, unless you know PHP, you don’t want to mess with this.

Turn it on. Now go to Settings -> Discussion. The new gravatar should appear in the list of default options. Select it, save, and voila! (if you’re using a caching plugin, you may have to clear it for this to take effect.)

Now there’s only one thing left to do–enjoy your blog’s new gravatars.

A special thanks to the helpful Build Internet article I found on changing default gravatars. Check it if you’d like to know how the code works and see images of what it’ll look like once you’ve done it.

Tutorial on Using Fantastico to Install Wordpress

Ms. Crafty — Fri, 14 Nov 2008 15:30:58 +0000

My newest tutorial is on using Fantastico to install a Wordpress blog. I’ve used images from my LunarPages account, but one beauty of Fantastico is that it’s basically the same on any of the hosting systems which offer it.

Fantastico is so simple that it doesn’t even need a tutorial. But if you’ve never used it before and are nervous, you can see how it works, step-by-step.

Once you know what you’re doing, actually using Fantastico to install Wordpress is a matter of one or two minutes. So if you’ve nervous about setting up Wordpress with Fantastico, check out the tutorial!

Easy Wordpress .htaccess 301 Redirect

Ms. Crafty — Fri, 17 Oct 2008 19:00:59 +0000

Recently, I moved a Wordpress blog from one domain to another. Most of the time, I work with blogging platform transfers or possibly moving the domain from one host to another.

In this case, I needed to direct traffic arriving at any page on the old domain to the same page on the new domain. I knew that I wanted to do a 301 redirect, but I hadn’t anticipated how simple the whole thing would be. I had anticipated a long list of redirects.

But it turns out that if you migrate a Wordpress blog from one domain to another domain, then all you need to do is make a small change to your .htaccess file at the old domain.

If there isn’t anything about the “RewriteEngine” in the .htaccess file, then add the following:

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

Replace www.newdomain.com with whatever your new domain is. Use “www” or not as you see fit.

However it’s quite likely that in the section following:

# BEGIN WordPress

you’ll find the first two lines:

Options +FollowSymLinks
RewriteEngine on

Directly after those, before any other rewrite commands, place:

RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

again replacing www.newdomain.com with the blog’s new domain.

This works on Linux servers which have Apache Mod-Rewrite enabled. That sounds very technical, but it’s also what’s offered by a large number of hosting companies. If you don’t know whether or not you have that, give the redirect a shot. You can always contact your hosting company if it doesn’t work and ask for their suggestions.

It takes about 20 seconds to do. And this works whether or not you still have Wordpress installed on the old domain. I deleted the entire Wordpress installation and just left the redirect up. Every link goes through to the new site.

A 301 redirect isn’t as good as a direct link, but in terms of traffic and even SEO it’s a best choice. Gives you time to find out who’s linking to your old site and ask them to change while making people follow those old links to the right place anyway.

How to Change the Name of Your Wordpress Theme

Ms. Crafty — Fri, 12 Sep 2008 14:30:19 +0000

I have come up with a lot of cutline-based themes. This means that the theme area of my test blog could easily end up confusing me–each one with the same screenshot and the same name/desc.

Someone else looking for this kind of information came here from Google the other day, but I don’t think s/he found it. So here’s how to change the name of a Wordpress theme you’re editing.

Changing Your Theme’s Name

Go to its style.css file.

At the top, you’ll see a section that looks like this:

/*

Theme Name:		BlogCrafted

Theme URI:		http://blogcrafted.com

Description:	An adaptable theme based off of Chris Pearson's original Cutline design.

Version:		1.0

Author:			Chris Pearson

Author URI:		http://pearsonified.com/

*/

This is the information you want to change. As you can see, I wasn’t too creative about a theme name, I just wanted to make it different from the others.

To change the name the theme displays under, you—not surprisingly—change Theme Name. Unless you’re making huge changes, it’s considered good form to leave the original author’s name. I did in this case, though if I build further I may just leave a reference to him in the description section.

For bonus points, you can also change the theme folder’s name. This is a bonus if you want it to match the new title. If you plan to use multiple themes based off one original theme, or even have them in your Wordpress theme’s folder, you have to rename all but one.

Changing Your Theme’s Screenshot Image

The second thing that will make your new theme look different in your theme lineup is its screenshot. Even with different names, a whole array of Cutline screenshots was very distracting.

Ideally, you want a screenshot which is either 300 x 225 pixels or 600 x 450 pixels. Or anything with that ratio. You’ll need to save it as screenshot.png and upload it to your theme’s file (not in any image folders it contains, but in the main file).

If you have photoshop, this shouldn’t be a problem. If not, here are some steps to make it using only MS Paint (which comes with all Windows software, as far as I know) and the internet (which you should have access to if you blog). If you have Linux or Mac, hopefully you’re familiar with your computer enough to know your equivalent.

First, take a screenshot of the page by hitting “Print Screen” or “PrtScrn” or whatever your button says.

Second, open Paint and in a new file hit Ctrl + v or click “Edit” -> “Paste.”

When saving, select the option to save it as a png, screenshot.png. Might as well start early.

You can also just create an image in Paint or a similar program using an image or the text tool. If it’s for your personal use, you can do whatever you want (if you’re releasing it, some theme distributors prefer a straight screenshot).

Third, visit Picnik a simple photo-editing site. You need to register for a free account, I had no problems doing so.

Then go into the “Photos” area and upload screenshot.png from your computer.

Once you’re in the editing section, select the cropping tool and crop until it’s about right. If you can’t get it to exactly the proportions listed above, get it as close as you can and then use the resizing tool to get it the rest of the way there.

Save to your computer (make sure it’s saving as a PNG file) and upload to your theme’s folder. Select the option to replace the previous screenshot. Voila!

Quick Fix for Unluved Commenters

Ms. Crafty — Wed, 10 Sep 2008 14:30:04 +0000

The CommentLuv (official site here) plugin is a popular way of rewarding your commenters by linking back to their most recent blog post. The idea is that it increases a commenter’s visitors and perhaps the number of comments on the Luving blog. I’m not sure if the links are “followed” or not, but that could have an impact on the commenter’s SEO as well.

Until last night, I had been feeling extremely unloved by CommentLuv. I’d comment on Luving sites and my latest post wouldn’t show up. At first I found it frustrating, then embarrassing, then I just gave up. I still commented, but I didn’t expect anything. One day, though, I shared my frustration with Jeff, who was dealing with the same issue. Last night he sent me an e-mail which helped.

If CommentLuv Can’t Find Your Latest Post

Step-by-step through the problem and the fix:

CommentLuv autodetects feeds. So it tried to get a response from http://blogcrafted.com/feed/
Until last night, going to http://blogcrafted.com/feed/ resulted in a 404 error. Feedreaders detected my feed, but the first place they try (and only place Comment Luv tried) took you to my nifty 404 page.
Because CommentLuv couldn’t detect my feed, it couldn’t find my latest post.
The fix: I went into my Feedburner Feedsmith area. Sure enough, I had left off the http:// and the feed’s address simply read: “feeds.feedburner.com/blogcrafted” instead of “http://feeds.feedburner.com/blogcrafted”. I added a simple “http://” and voila!

If CommentLuv hasn’t been recognizing your blog’s posts, I recommend checking your Feedburner Feedsmith area, if you’re using Feedsmith. Add the http:// if it’s missing. Also, check out http://yoursite.com/feed/ and see what shows up.

Good luck!

How to Build a Wordpress Theme Preview Site

Ms. Crafty — Wed, 20 Aug 2008 14:30:15 +0000

After putting up my first Wordpress theme (modification), I began poking around the internet for a way to let users interact with it. Screenshots are ok in their place, but if I’m going to even try out a Wordpress theme, I want a chance to test it first. To that end, I have created themes.blogcrafted.com.

Right now the only themes up there are the Silver Light 3 Column theme and the Wordpress default theme. I’ve got a few other theme modifications in the works, but a lot depends on whether I think I should just write up how to make the changes or whether they’re dramatic and complicated enough to merit a rerelease of the theme.

How to Use the Theme Switcher Reloaded Plugin

Setting up your own theme preview site is pretty easy. The plugin I used actually switches themes (some options only allow admins to view another theme or only show previews). You’ll need another link (or to use a menu) to switch back.

It can be used for regular blogs as well as previewers, if it won’t disrupt your site too much. But most of the time, readers don’t care about that option and it may just distract them from the rest of your blog. I think it depends on your readership. On a site that’s explicitly about showing off themes, it’s perfect.

I’m talking about the Theme Switcher Reloaded plugin.

The plugin itself is pretty easy to set up. You can download it, upload it to your plugins, and activate. However, I didn’t find a lot of good instructions on using it. So I’ve come up with some based on my own experience.

Putting Up a List of Available Themes (and the runPHP plugin)

If you’re using PHP code in your sidebar, you can use one of these two PHP calls to bring a list of available themes. As far as I can tell, the lists will include all themes currently in your wp-content/themes/ folder. Therefore, this option is best for a theme-preview-type site where you’ve intentionally chosen the themes in your folder. Use the linking option below for regular sites or when you just want one theme option.

To call a list of themes (which applies

styles), use this code:

If you’d rather save space and have a drop-down menu, use this variation:

I went with the dropdown.

You can’t use the above code in a Wordpress page or post without some help. PHP and posts/pages simply don’t go together. If you want to put either the list or dropdown in a post/page, the runPHP plugin will help. Very quick overview: download, upload, activate. Then go to Settings – > runPHP to set who can use it…select whatever types of users you want to be able to use it. I’m an administrator so I just activated it for that.

Next, when you want to use PHP in a post/page, put the code into the editor part (on the HTML side, not Visual). Then scroll all the way to the bottom of the page, past tags, categories, and post revisions and check the little box that asks “run PHP code?” That’s it. Now back to switching themes.

Writing Theme-Switching Links

If you don’t want to use PHP, if you only want to offer certain themes, or if you want to write about a specific theme, you’ll have to write the links yourself. There wasn’t anything online, but it’s quite simple.

Theme-changing links are made by simply adding this to the page’s address:

?wptheme=themename

The only exception is index pages of most blogs, which require putting /index.php after the blog’s address.

Some examples:

Let’s change themes.blogcrafted.com to “default” theme for you and land on the front page. We’d to that using this link:
http://themes.blogcrafted.com/index.php?wptheme=default

To change an individual post back to the Silver Light 3-Column theme, we use this link:
http://themes.blogcrafted.com/2008/08/19/worth-a-thousand-words/?wptheme=silver-light-3-col

Obviously, you’d just change the “default” to “silver-light-3-col” if you wanted to view the main page as Silver Light again…though changing the theme of any page changes it for the whole site until you change again.

But how do you find the name to include after the “=”?

How to Find the Theme’s Name

Some of the theme names aren’t intuitive. As far as I can tell, they’re based on the name of the folder in which the theme is contained. So “silver-light-3-col” works. Surprisingly, for the Blue Kino theme (whose folder’s name is “blue kino”) the actual ?wptheme=blue kino (with the space!) works. Not on either of these sites (since I don’t have that theme on them), but I decided to try it out on my test site.

You may have to play around with it. If you can’t get them to work, try putting the above PHP in a sidebar and use it to switch themes. When you first switch themes, it’ll automatically take you to the front page of the blog and include the ?wptheme=themename in the location bar.

Critical Thing to Remember (MUST READ THIS)

Make a way for your readers to switch back to the original theme. I say this because it’s something I’ve noticed in my testing. If I stick the PHP in my sidebar code on a test site, then it’s not there when I switch themes (since I use the actual code, not the widget). So I have to use the back button.

Or suppose that you linked to another way of viewing your site but didn’t give a link to switch it back. Since the browser has actually switched themes, there’s no easy way to switch back without that link.

Putting either the PHP or a link in the post with the switching option will work, since the post will be accessible whatever the theme. Or using PHP widgets in your sidebar (as long as you use only widget-ready themes which show that sidebar). Or hand-coding if you put it in every possible theme’s sidebar. Just be sure to give readers the option so they aren’t left in limbo with a theme they were just trying to peek at.

Any questions? Let me know in the comments!

How to Fix Italics on Redie 3.0

Ms. Crafty — Fri, 01 Aug 2008 14:30:31 +0000

The Redie 3.0 Wordpress Theme is all-around pretty well-designed and usable. I was recently working with someone on this theme when the completely unexpected happened. (but don’t worry, there’s a fix)

What’s Wrong With Redie 3.0 Italics

In Wordpress (and most other xhtml sites) italicizing is done via tags. So my client simply selected the italics option in Wordpress’s editor, which added tags to the code. The resulting text looked like this:

What, you say, that’s not italic! Exactly. Not only is it not italic, but the line is actually broken. I typed that all as one line. It should have displayed:

This part of the post isn’t italicized, but wait this part is. Oh, now we’re not italicized again.

The italics in Redie 3.0 are broken. Sort-of.

Where the Problem Lies

Technically, they’re behaving just like the designer told them to. What I expect happened is that the designer decided to come up with a means of emphasizing text that was different. He or she asked “besides blockquotes, what are other good ways of setting text apart? why not change the tags to really emphasize words?” There’s nothing wrong with that.

But your average user (myself included) doesn’t expect simply calling italics to cause a line break. If the italics were gray and “normal” (instead of italic) then this might not even cause much of a problem. It would emphasize the text acceptably though it might frustrate users a bit. It wouldn’t embarrass them.

You see, the average person italicizes only a word or two in their sentences. I got a little carried away on italics in this post. Imagine if each was on its own line and looked kinda funky (as in the picture above. That would probably annoy you or make you ask “what was she thinking?” And your average person doesn’t check how the italics are set. Even I don’t, and I do check a lot of things about themes.

So I believe that this option, while not necessarily a bad option, should have used a different call code…perhaps the tag (not blockquote, just quote…which is a legitimate in-line tag but less likely to cause confusion). Perhaps the designer could have created a new class which could be applied as with or
tags.

How to Fix the Redie 3.0 Italics

So how to do you fix it? Don’t panic, it’s very simple. First, go to the Design -> Theme Editor part of your blog administration area. If you have this theme active, the stylesheet should show up immediately. If not, click on it (should be at the bottom of the list of files on the left):

Now scroll in the file until you get to this section:

em { padding: 0px; font-size: 11px; font-style: normal; font-family: Arial, Helvetica, sans-serif; color: #666666; clear: both; display: block; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

Just remove all the code I included in the quote section. Everything from “em” to the closing “margin-left: 0px; }” and then click “Update File.” If you’re running a caching plugin, refresh/clear the cache for the changes to apply right away (or wait until they do).

That’s all you need to do. You don’t need to define anything in its place. Browsers understand by default and will italicize it as long as the stylesheet isn’t telling them to do something else. Your italics will now be…italics. Which is what most people want when they use or select the “italics” option in their WYSIWYG (Wordpress calls it “Visual”) text editor.

How to Style Your Italics

If do want to style your italics, leave the em section but insert different code between the { } . Don’t leave what it’s currently got unless you want your italics broken onto different lines.

If you have a different theme, you can always create your own em section in the code. You can make the italics gray, “normal,” a different font…whatever you want. And as long as you’re the one who designed them, they shouldn’t confuse you.

Related posts:
Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme

Tutorial: Adding Gravatars to Cutline Themes

How to Change the Name of Your Wordpress Theme