Permalink Settings
Update: This issue will no longer exist once WordPress 3.3 is released: http://core.trac.wordpress.org/changeset/18541/
I just learned today that certain permalink structures in WordPress are better than others from a performance stand point. As it turns out, starting the permalink structure with %postname%, %category%, %tag%, or %author% can cause a performance hit on blogs with lots of posts and/or pages. Now whether the performance is more important than SEO, less important than SEO, or moderately irrelevant to SEO is still up for debate. There appears to be a bit of an argument between SEO “experts” and WordPress developers/enthusiasts over what the best structure actually is. After reading Otto’s explanation of the performance issues involved, I’ve decided to change my permalink structure from:
/%category%/%postname%
to:
/%year%/%postname%
Thankfully, WordPress recognizes this change and automatically redirects the old URLs to the new ones so no links are broken and no plugins are required.
(Update: Since my blog is quite small still, I’ve decided to switch my permalinks back to the category./postname method)
- PublishedMarch 17, 2011
- UpdatedAugust 19, 2011
- Posted InPerformance
- DifficultyBegginer
- Tested With3.1
Sackcloth Studios Redesign
It’s been a few years since I first launched sackclothstudios.com (my business site) and it was beginning to show it’s age. The newest post on the blog was over a year old and the site just needed a little love. I figured while I was at it, I might as well document the process.
Easy Embed WordPress Plugin
The WordPress editor doesn’t always play nice with HTML (especially if you switch back and forth between the Visual and HTML editor). This problem has bugged me for a while, and I finally sat down and built a simple plugin to solve it. There are other solutions out there, but I find this method to be the easiest to use. After installing the plugin, all that is required is to create a custom field (you can name it anything), place your code in the new custom field. This could be HTML, video embed codes, Paypal forms, etc. Then place the following shortcode into your post where you want your special code to go:
[easyembed field="name-of-custom-field"]
The field property should be the name of the custom field you created. The shortcode above would display the contents of a custom field with the name “easy”
Download Easy Embed from the WordPress plugin directory.
View the code below:
<?php
/*
Plugin Name: Easy Embed
Plugin URI: http://wordpress.org/#
Description: Allows the embedding of any code and protects it from being modified by the WordPress editor
Author: Alex Mansfield
Version: 1.0
Author URI: http://alexmansfield.com/
*/
function am_easy_embed($array) {
extract(shortcode_atts(array('field' => 'custom'), $array));
global $post;
$html = get_post_meta($post->ID, $field, true);
return $html;
}
add_shortcode('easyembed', 'am_easy_embed');
?>
- PublishedJuly 29, 2010
- UpdatedJanuary 16, 2011
- Posted InPlugins
- Tested With3.0
Sanitary Theme 0.3
I’ve made a number of improvements since version 0.2. Although I’m sure there are plenty more improvements that could be made, I figure it’s about time I released update. Below is the changelog.
- PublishedJuly 28, 2010
- Posted InThemes
- Tested With3.0
Outline: the Ignored CSS Property
Note: Here is another post originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.
Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an element outside of it’s border. By definition, it takes up no space. Sounds impossible, right? In reality, it does take up space (you can see it!) however, that space is not added to the width of the element like a border would be.
Most often, the outline is used to highlight an active link. By default this is a small dotted line that encapsulates the link. To be honest, as a designer I have often found the outline to be a bit ugly. There are some designers who hide the outline entirely (I used to be one of them). However, in Firefox, Internet Explorer and Chrome you can navigate the web using only the keyboard by tabbing through the links on each page. Each link is highlighted by an outline when you reach it. You can hit enter to follow the link. Hiding the outline entirely takes that feature away from users who prefer to use their keyboards. So to prevent the ugly outline while still retaining keyboard navigation we can style the outline using CSS.
This solution is not perfect, due to the lack of support by Internet Explorer (as of version 7). While Internet Explorer uses an outline to highlight links, it does not support styling it will CSS. Firefox, Safari, Opera and Chrome on the other hand, do allow you to specify your own styles.
The outline can be styled with the following properties:
- outline-color
- outline-style
- outline-width
- outline
Outline-color behaves like any other color declaration and also supports the value “invert” which performs a color inversion of the pixels on the screen. This is the default behavior and ensures that the outline will stand out from the background. Outline color can be set like this:
a{outline-color: white;}
Outline-style has the same possible values as the more common property border-style and is set like this:
a{outline-style: dashed;}
Outline-width can be set to thin, medium, thick, or can be specified with a length such as 3px.
a{outline-width: 1px;}
Finally, outline is a shorthand property for setting the previous three properties all at once. For example:
a{outline:2px solid red;}
Keep in mind an outline is the same on all sides. Unlike border, you cannot specify a style for only one side of an outline. To play around with the outline property, visit http://www.w3schools.com/CSS/tryit.asp?filename=trycss_outline
For even more information:
- Don’t remove the outline from links – arjaneising.nl
- Removing the dotted line – csstricks.com
- The outline CSS property – sitepoint.com
- PublishedJune 18, 2010
- Posted InCSS
Simple PHP Redirect in WordPress
Note: This post was originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.
Sometimes when using WordPress you want to include a non-Wordpress page in your main navigation while still maintaining the simplicity of the wp_list_pages() function. I know there are plugins that do this type of thing, but many of them are just overkill. I just needed one non-Wordpress page on my menu, so here’s what I did. First, I created a page from within WordPress and gave it a heading but left the body blank. My page was called “Purchase” but you can name it whatever you’d like. This is the name that will show up in your navigation menu. Then I went to the header.php file of my theme and added this at the top:
<?php
if(is_page('purchase')){
header("HTTP/1.1 301 Moved Permanently");
header("Status: 301 Moved Permanently");
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}
?>
Obiously, you’ll want to change the if statement to check for the blank page that you set up. Then change “http://www.example.com/” to whatever page you want the redirect to point to. Make sure that you put the code at the very top of the header.php file. If something else comes before it, it won’t work.
I first found this PHP redirect on Steven Hargrove’s blog. He gives examples of this in a number of different languages. However, I adapted it to WordPress and added the ” header( “Connection: close”);” line to get it working properly. I’d love to hear how you solve this little WordPress problem. If you have a different solution, please leave a comment below with a brief explaination. Thanks.
Update: If you want to make a temporary redirect (302), rather than a permanent one (301) use the code below:
<?php
if(is_page('purchase')){
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}
?>
Algen asked if it was possible to do a delayed redirect. It is possible, but not with PHP. Here is the HTML necessary to redirect a page after 30 seconds:
<meta http-equiv="refresh" content="10;url=http://www.example.php">
One Year
Today marks exactly one year since I started this website. It has been (and I hope it continues to be) a grand experiment in blogging. This past year of blogging definitely didn’t go as planned. First, I started working for Jason Schuller over at press75.com, which has been great! Then I went back to school (which has also been great). Consequently, I didn’t post nearly as often as I had hoped. Running a business and taking an average of 20 credits per semester doesn’t leave so much time for blogging. I hope to have a lighter class load this coming year, so maybe the blog posts will be a little more frequent. Anyway, here are a few of the stats for year number one:
- Blog posts: 30
- Visits: 3,200
- Visitors: 2,800
- Pageviews: 4,500
- Avg. time on the site: 0:53
- Backlinks (as measured by Yahoo): 175
- Google Pagerank: 4
These stats aren’t really that important, but I look forward to comparing them to future years. I also look forward to not comparing them to John O’Nolan, who started just six months before me 
Looking back over these stats, I noticed noticed that I posted more often than I would have guessed. I think as time went on and I got busier, my posts became less frequent, so it feels like I hardly posted at all. I think for the coming year I would be happy with a similar number of posts spread out more evenly this time. Finally, I have a few goals for the future that are not directly related to this blog:
- Re-brand Sackcloth Studios (my web design and development business).
- Build the Trusty Press brand.
- Complete another WordPress plugin.
I have a few other projects up my sleeve, but I’ll just leave it at that for now.
- PublishedJune 1, 2010
- Posted InProgress
Sanitary Theme 0.2
It has been 10 months to the day since I released Sanitary 0.1, a clean starting point for developing WordPress themes. An update is obviously overdue, so even though it will need to be updated again as soon as WordPress 3.0 comes out, I’m releasing Sanitary 0.2. It is still a work in progress, but as you can see from the changelog, there have been quite a few changes under the hood. The change that I’m most excited about is the move to HTML5, with support for even Internet Explorer (Thanks to Remy Sharp’s HTML5 enabling script). Download Sanitary 0.2
Here’s the changelog:
deleted
- searchform.php
- categories.php
- archive.php
- archives.php
functions.php
- added thumbnail support
single.php
- changed h2 to h1 (single.php)
search.php
- replaced the seachform call with a form
404.php
- replaced the seachform with a widget area
archives.php
- replaced the seachform call with a form
archive.php
- replaced the seachform call with a form
comments.php
- added anchor tag to comments heading to allow links to the comments section (url.com/example.html#comments)
- added <small> tags around allowed tags
- removed double reference to number of comments
- changed ids to match names for comment form
- added label for comment textbox
- removed the “(required)” message from the “Name” and “Mail” labels (Not sure about this decision. Input welcome.)
- Changed “Mail” label to “Email”
all over the place
- added underscores to many ids (.post_meta, .post_navigation #comments_form)
- converted to html5 and included javascript to allow older browsers to render new tags properly
(http://remysharp.com/2009/01/07/html5-enabling-script/)
WordPress Single Category Search
Sometimes it comes in handy to make the search form on a blog only return results from a single category. It’s actually quite simple.
1. Find the category ID
First we need to find the ID of the category that we want to search. We can find that by going to Posts>Categories and hovering over the category we want to search in the categories list on the right side of the page. When we hover the mouse over a category, we’ll see something like this in the status bar (usually the bottom left corner of the browser):
…/wp-admin/categories.php?action=edit&cat_ID=3
As you can probably see, the 3 at the end is the category ID. That number is all we need to know.
2. Edit the searchform.php file
We just need to find this line in the searchform.php file of the theme:
<form method="get" id="searchForm" action="<?php bloginfo('home'); ?>/">
and add this hidden field immediately after it:
<input type="hidden" name="cat" id="cat" value="3"/>
3. Apply the category ID
Now we need to make sure that we change the value of the hidden field to the category ID we found in step one. For example, if the category we chose had an ID of 12, then the hidden field would look like this:
<input type="hidden" name="cat" id="cat" value="12"/>
It’s that easy! If you have any questions, feel free to post them in the comments section below.
Image by rockmixer
- PublishedSeptember 7, 2009
- Posted InWordpress
WordPress Plugin: Latest Posts by Author
Update: The plugin has gone through a number of revisions since I first published this post. See: http://wordpress.org/extend/plugins/latest-posts-by-author/ for the latest versions. The code posted below is from version 0.6.
I just posted my first plugin to wordpress.org. It creates an unordered list of the most recent posts by a given author. It can be called both from within a post using a shortcode or from within a theme file. Check out Latest Posts by Author at wordpress.org for more details.
To demonstrate just how easy it is to create a plugin for WordPress, I’m posting the plugin code below.
<?php
/*
Plugin Name: Latest Posts by Author
Plugin URI: http://wordpress.org/#
Description: Displays a list of recent posts by the specified author
Author: Alex Mansfield
Version: 0.6
Author URI: http://alexmansfield.com/
*/
function latest_posts_by_author($array) {
extract(shortcode_atts(array('author' => 'admin', 'show' => 5, 'excerpt' => 'false'), $array));
global $wpdb;
$table = $wpdb->prefix . 'users';
$result = $wpdb->get_results('SELECT ID FROM '.$table.' WHERE user_login = "'.$author.'"');
$id = $result[0]->ID;
$table = $wpdb->prefix . 'posts';
$result = $wpdb->get_results('SELECT * FROM '.$table.' WHERE post_author = '.$id.' AND post_status = "publish" AND post_type = "post" ORDER BY post_date DESC');
$i = 0;
$html = '<ul>';
foreach ($result as $numpost) {
$html .= '<li><a href="'.get_permalink($numpost->ID).'">'.$numpost->post_title.'</a>';
if($excerpt == 'true'){
$html .= '<p>'.$numpost->post_excerpt.'</p>';
}
$html .= '</li>';
$i++;
if($i == $show){
break;
}
}
$html .= '</ul>';
return $html;
}
add_shortcode('latestbyauthor', 'latest_posts_by_author');
?>