I finally got my head into doing a redesign of my blog and integrating several sites I’ve into one place. That should make it easier to expand, maintain, backup and setup if needed. I also had some demanding requirements to leave things to my taste in laziness:
- I like WordPress for blogging most of the time
- I want to be able to use an HTML editor because posting big articles and/or code can be complex with WordPress and there are page’s I can’t handle with it
- I don’t want to have a ton of WordPress files mixed with custom pages at the folder’s root
- I like to use Dreamweaver and it’s templates to easily change a template and all pages (be it XHTML, PHP, ASP.Net, etc..) are automatically updated by Dreamweaver
- I don’t want to lose the little PageRank I’ve
- I want it simple and easy to use after the setup
So, I started by doing the design I craved. After the draft was done I decided to step into WordPress (a test copy obviously) and to avoid having a massive number of pages/folders at the root I placed it within a “blog” directory.
Creating the theme itself took some time mainly to figure out the best way of doing things. So, after I duplicated the WordPress default theme and named it (after myself) I started poking about the files I had to edit. Finally I decided that I needed to change my Dreamweaver template to reassemble this structure:
html head -> editable region for the title -> my scripts and CSS -> editable region for WordPress and custom meta tags/includes ->body -> editable region for contents -> close body
Width this structure in place I started to apply the template to the WordPress files, the most noteworthy are the header.php, where I removed the html declaration and the body open tag and header, and finally the footer where I removed the body closing tag.
After that, all I really needed was to edit index.php, articles.php, etc… by applying the template, moved the php header call into the header’s editable region and the footer’s call to the end of the editable content region. Obviously not every page had the template applied, some of the theme pages are to be included inside the master pages do I mostly inspected them and did a small adjustment here and there.
After a lot of CSS tweaking came the massive brain work of figuring out how to keep the existing external links working and making sure my custom pages would still work. This was the hardest thing, first I thought the best was were to do 301 redirects which Google would make sure to preserve the pages’ PageRank. But then I realized that maybe Google wouldn’t allow me to have only the requests with a query string to be redirected and would assume the whole path was to be replaced, effectively disabling my use of my new pages at the site’s root.
Luckily I found a very easy solution that matches all my requirements, I used mod_rewrite via an .htaccess file. This is the code I used:
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{QUERY_STRING} (.+)
RewriteRule ^index.php?(.*) /blog/?%1
RewriteRule ^wp-(.*)$ /blog/wp-$1
Basically it redirects all my home page’s traffic that has a query string to WordPress or to my “new” default home page if there’s nothing in the query string, additionally since WordPress still needs at least the wp-admin folder and wp-login.php to be usable I redirect everything starting with “wp-“.
In the end I only have 2 major restrictions if I chose to maintain this layout, I can’t have files or folders named wp-* and my home page can’t have query string parameters. Both are acceptable specially if I take into consideration that none of my users or search engines will ever notice the internal changes in the folder layout.
I specially like the fact that now I can edit my template and/or CSS files and I just need to tell Dreamweaver to synchronize all the files, it should be pretty easy to use from now on and hopefully that will be translated into some more motivation to blog.
Check back in a few days to see the new design online.
Tags: Dreamweaver, SEO, Wordpress