Dvorak Designs

WordPress Permalinks: Add /blog/ before blog posts & related page URLs

Preston Dvorak — Sat, 18 Jun 2011 18:01:10 +0000

One of the things I did with this website, and something I see a lot of people wanting to do when they use WordPress as full Content Management System, is to add /blog/ into the URLs of their blog posts and other related pages. While keeping WordPress in the root of their server, and keeping their static pages from having the blog prefix. As an example, you will see the URL of this post as starts off with www.dvorakdesigns.com/blog/, where as my other website pages do not have /blog/ in them.

Really it’s not that hard. But, if you’re picky like me, you not only want your blog posts to have the URL prefix, but also your category, tag, archive and author pages as well; pretty much anything related to the blog portion of your website. This proved to be a little more difficult to figure out, though I eventually did thanks to help from people over at WordPress StackExchange.

As a quick note/warning, this will not work if you have a sub-directory on your server named “blog” or if you have a sub-domain (which would make a sub-directory) on your server at blog.yourdomain.com. Also, if you’re like me and used to have a blog at a sub-domain like that, you will have problems setting up redirects. I’m currently looking into a solution for that now, but no one seems to know how to do it. Once I figure it out I will post it.

At any rate, here’s how to setup the URL structure.

First, you will need to setup WordPress to use a static page for your homepage, and a different page for the index of your blog (the page that shows all your recent posts). If you’re using WordPress as a CMS, you’ve probably already done thing, but in case you haven’t, here’s how to do it.

Create two new pages. One will be your new, static home page, and the other will be the index for your blog. The page you make for your homepage can contain any content you want, but the page you create for your new blog index should be left blank. Also, in order to keep the consistent URL structure that we’re trying to create, be sure the URL slug for your new blog page is just “blog.”

Once you have your pages created, under the Settings header on the left hand menu, click on Reading. On this page, you will see the Front page displays option. Select the A static page option, and pick the two correct pages from the drop down menus. If done correctly, your blog index should now reside at a URL like www.example.com/blog.

Next, you will need to edit your .htaccess file to remove the /category/ prefix from all of your category pages. By default, WordPress will make your category URLs look like this: http://www.example.com/category/category-name. We want them to look like this (for now): http://www.example.com/category-name.

To accomplish this, add the following line into your .htaccess file. Be sure to keep a backup of your .htaccess file, and don’t overwrite anything that’s already in there. Also, be sure to change the website URL.

RewriteRule ^category/(.+)$ http://www.your-website.com/$1 [R=301,L]

After that, go back to your WordPress admin panel again. On the left hand menu, under the Settings heading, click on Permalinks. This will bring you to the page where you can edit your permalink structure. You will want to setup your permalinks as follows.

Select a Custom Structure for your common settings, if you haven’t already, and set it up as /blog/%postname%. This will make your blog post URLs look something like this: www.example.com/blog/article-title. If you had something for a Custom Structure already, just add /blog/ before it.

For Category base, put in /blog/category. This will make your category links look like this: www.example.come/blog/category/category-name. The reason we had to first remove the category prefix using the .htaccess file, is to prevent WordPress from adding the prefix where we didn’t want it. Without first removing it, our URLs would have looked like this: www.example.com/category/blog/category/category-name. While I don’t think it’s supposed to happen that way, I did run into that problem, so first removing it to give us a clean slate was the easiest safeguard.

Finally, for the Tag base, add /blog/tag. As you can probably guess by now, this will give you a URL that looks like this: www.example.com/blog/tag/tag-name.

You should now have a nice, organized URL setup for your WordPress-based website. If you run into any problems, don’t hesitate to leave a comment.

Massive Website Speed Improvement Guide

Preston Dvorak — Tue, 07 Jun 2011 15:26:10 +0000

I’ve written quite a few bits and pieces about website speed and speed optimization, but I decided I wanted to bring them all together into a website speed super article. My goal with this will be to cover as many aspects of improving website speed that I know about, along with how I utilize them.

I cover everything pretty thoroughly in this guide, but there’s always something I don’t know about yet. If you follow this list, your website should be pretty well off though. Of course, if you know anything I didn’t cover, please tell me in a comment at the end of the article. It will benefit the community, and I’ll probably come out with a part two of this guide with everything I’ve discovered after writing this.

Now, onto the list. If you’re ready, read on! Be sure you’re prepared though, it’s about six pages of awesome tips.

1) Use external CSS and Javascript files

Using external CSS and Javascript files usually allows for better browser caching. The trade off then is more requests being sent to your server on the initial load of a web page, compared to having the CSS or Javascript inline with the document. Though once everything is cached from the initial load, you will have less requests to the server, and a smaller HTML file size because it won’t have any inline styles or Javascript.

To help on the initial load time, you should consider merging CSS and Javascript files, which will limit the number of requests sent to the server. We detail just how to do that in steps 3 and 5.

2) Neaten up your CSS files

CSS files are often overlooked, and while optimizing them may not net you a ton of extra speed, with how easy it is to optimize them, you shouldn’t be skipping it. The most common problems with CSS files are unneeded line breaks, tabs, spaces, and trailing semi-colons. So how much size you take off your CSS file will depend on how efficiently you code to begin with.

You should try to turn something like this:

#menu-content {
	list-style: none;
}
#menu-content li {
	float: left;
	display: inline;
	margin: 13px;
}
#menu-content a {
	padding: 13px 10px 12px 10px;
	height: 100px;
	color: #fff;
	text-decoration: none;
}

Into something like this:

#menu-content{list-style:none}
#menu-content li{float:left;display:inline; margin:13px}
#menu-content a{
padding:13px 10px 12px 10px;
height: 100px;
color:#fff;
text-decoration:none
}

My personal preference is to have any style set with three or less styles on one line. In addition to that, you can remove spaces after colons, the last semi-colon in each style set, tabbed elements, and even line breaks in between style sets. What you personally do will depend a little on your preference, but I find these optimizations still keep things pretty readable.

You should also use CSS shorthand techniques whenever possible. That means instead of having something like this:

padding-top:5px
padding-left:10px
padding-right:20px
padding-bottom:15px

You should have:

padding:5px 20px 15px 10px

Here is a nice article on CSS shorthand techniques. Also, on any of the W3 Schools pages, you will generally find information on shorthand techniques, such as on the Margins page.

If you would like to automate the CSS optimization process pretty accurately (including the shorthand techniques), I recommend CleanCSS . Although, if you can code your stylesheet like this to begin with, that will always be the most accurate.

3) Merge any stylesheets you can

If you have several separate stylesheets that you’re using, merging them all together will mean less requests to your server when a page loads. If you need to separate them within a file, you can use large, commented “banners” to make the divisions more noticeable. This will add a little bit of size to the file, but it will still be an improvement over loading multiple files each time the page loads

Here is a large “banner” I often use in my stylesheets:

/*-----------------------------*/
/*-------------Section Title------------*/
/*-----------------------------*/

Of course, sometimes you have separate stylesheets for things like Internet Explorer, with their own call to load only for IE. Those you shouldn’t merge, or they will load with all of your other styles. Unless for some reason you have multiple stylesheets loading for IE, then you can merge all of those.

If you’re using WordPress with plugins, they may be loading stylesheets on their own. You can go through a long process to stop them from loading and put the styles in your own stylesheet, but that method will have to be redone every time you update the plugin. So instead, I recommend the WP Minify plugin. This plugin also works for merging Javascript files from WordPress plugins, as detailed below.

4) Use minimized Javascript files

If you’re working with Javascript (.js) files, you should look for a minimized version from the author. Usually minimized files end in .min.js. You should especially consider this for large libraries like jQuery, MooTools, and jQuery UI.

5) Merge your Javascript files

Just like with CSS, merging your Javascript files keeps the server from handling extra requests for multiple files. There is a handy service for merging all of the Javascript files on an existing website, called JMerge. If you would rather do it manually, it’s usually as easy as copying and pasting each of your Javascript files into a single file.

If you are running a WordPress blog with plugins, you may not have access to some of the files being loaded by them. To merge Javascript files in WordPress, again I recommend the WP Minify plugin.

6) Load Javascript files in the footer, or tell them to load last

Whenever possible, you should load any Javascript files from the bottom of your website. This is because whenever a browser comes to a Javascript file, it quits loading any other elements of the page. Normally, a browser will download a couple elements at the same time (such as two images), but that is not true with Javascript files. So putting as many of them at the bottom of the page as you can will allow your other elements to load up faster first.

Another technique to tell a browser to wait to load a Javascript file is the defer attribute. This can be used if, for some reason, you can’t take a Javascript file out of the header, or don’t want to. Not that FireFox does not support this attribute, and Internet Explorer has marginal support for it. So whenever possible just put your Javascript in the footer.

To use the defer attribute, simply add it to an existing script tag, like below.