Posts Tagged ‘WordPress’

Moving a Wordpress install cleanly

This is a real simple process and but if you don’t take the right steps it can get ugly quick.  In my case I staged the site in one spot then moved it to deploy, and these are the steps I took.

1. In the admin interface at the current blog location navigate to the Settings->General section.  You’ll want to be here so that when you have moved everything over to it’s new location you can change the ‘Wordpress address (URL)’ to it’s new address.

2. Copy over the whole files structure to its new location (leave a copy in it’s current location for the time being).

3. If you have moved the database also, or it’s staying where it is but the file structure is moving server, basically if you need to change the host name then update the entry in the wp-config.php file.  In my case I didn’t need to make this change.

4. Now you should be able to navigate to your new blog in a browser window.

5. Go back to the admin interface that you went to in step 1 above and change the ‘Wordpress address (URL)’ to its new location, hit save and it should make the change and redirect you to the admin interface at the new location.  This step is necessary (along with step 1) as Wordpress does a redirect after every interaction and you could find yourself locked out and having to make this change directly in the database.

6. The final step is to navigate in the admin interface to Settings->Miscellaneous and change the ‘Store uploads in this folder’.  I already blogged about this step here.

That’s it.  The site should be fully migrated to it’s new spot and the old location ready to purge.

Thursday, August 27th, 2009

Converting Blogger (blogspot) to Wordpress

I just recently made this switch for a number of reasons but for this post I want to concentrate on the exact steps taken.  I thought the switch was going to be a huge task but in the end I found out that most of it is automated and the whole switch took less than a couple of hours (creating a custom theme and tweaking all the settings and plugins much much longer).  I had some pretty good page rankings with Google and a week later I can now confirm that my blogs search rankings converted over cleanly.

Step 0 – Blogger Custom Domain

I call this step zero because I had already been running my Blogger blog with a custom domain.  If you do not have a custom domain setup with your Blogger account then some of these steps won’t apply (3,9) and you will lose your page rankings.

Step 1 – Install Wordpress

I installed Wordpress myself on my own hosting account.  I can’t guarantee these steps will work for an account hosted at wordpress.com or with something like a one-click install your hosting company may provide.

Step 2 – Import Blogger

Wordpress has a great import tool built-in.  In your Wordpress admin interface navigate to Tools->Import->Blogger and follow the steps.  It uses openauth to connect with your Blogger account.  Follow the steps and you should be all set.  You can read more about it here.

Step 3 – URL Names

This is the most complicated step, but it’s still easy.  In your Wordpress admin interface go to Settings->Permalinks and select ‘Month and name’ .  As Blogger creates URL names slightly differently from Wordpress (for example Blogger limits the number of words allowed in a URL where as Wordpress doesn’t) you’ll need to make sure both URL names match in all cases.  Installing this plugin should do the trick (I did it manually so I can’t vouch for it).  This article also talks about how to fix the ‘.html’ extension that Blogger adds.  As it says you can go back into your permalinks settings and alter how your posts are published to end with the ‘.html’ extension, however I preferred to stick with the Wordpress default setup and opted to add the mod_rewrite entry to my .htaccess file.  I also added the archive entry to convert those old links to the new system.  Make sure you add the block outside of the Wordpress section (if you add it to the Wordpress section it will eventually get deleted), my .htaccess file now looks like:

# BEGIN Blogger URL RewriteRewriteEngine On
RewriteBase /
RewriteRule ^([0-9]{4})/([0-9]{1,2})/([^/]+)\.html$ $1/$2/$3/ [QSA,R=301,L]
RewriteRule ^([0-9]{4})_([0-9]{1,2})_([0-9]{1,2})_archive.html$ $1/$2/ [QSA,R=301,L]
# END Blogger URL Rewrite

# BEGIN WordPress
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
# END WordPress

Step 4 – Your comments

This is probably the toughest loss during the conversion.  Whilst the import tool works really nicely and maintains all the comments it doesn’t maintain their email association, effectively leaving every comment your blog has ever had as anonymous, so if your blog is super active and has tons of comments going back years this might be a deal breaker.  I didn’t have a ton of comments so it didn’t bother me much, what I did do was go through the comments in the admin interface and update all the comments I had posted myself so at least they were re-associated with me.

Step 5 – Links linking back to blog

This step is only relevant if your domain name or file path will change.  I myself did this step manually as I was working with a fairly small blog and I knew I hadn’t inter-linked too many times throughout my posts, so it didn’t take me long.  However for a large blog I’m sure there is a plugin out there already, or you could probably write a plugin to accomplish this in a few lines of code.

Step 6 – Categories to Tags

In Blogger we had “Categories” but we didn’t have “Tags”, or at least I didn’t use them, after the import I only had categories not tags.  As I wanted to use the tag cloud widget I needed to convert my categories to tags.  There may be a plugin to do this automatically but I just went ahead and did it manually, I went through all my posts and copied and pasted the categories into the tags field within the Posts->Quick Edit in the admin interface.  Couldn’t have taken more than 10 minutes once I was in the flow, but then I was moving a smaller blog.  If your blog is huge you may wanna try and find a plugin to do this or write one yourself.

Step 7 – Styling old posts

If you have switched designs during the switch you might find that a lot elements within older posts now clash with that theme.  For example my old theme had a light background whereas my new theme has a dark one, so as I looked through old posts I found styled content that totally clashed or was even unreadable.  If you have done a good job with using CSS classes to style your Blogger posts then this step will be very easy as it just involves bring over those class declarations into your Wordpress styleguide and altering their properties to match your new theme, otherwise you’ll have to go through your old posts and find those elements and style them (now will be a good time to create those CSS classes so you can get this step done much quicker and have those styles for your new posts moving forward).  For this step I also went through all my posts with code examples and converted them to use the amazing SyntaxHighlighter.

Step 8 – Feedburner and Google Analytics

It’s almost easy to forget but these steps are hugely important.  In the case of Feedburner I was disappointed to find that I’d named my feed something very closely tied to the name of my old blog, but as part of the switch I was coming up with a fresh name and domain.  So what I decided to do was create completely new feeds that point to the new site (use the Wordpress Feedburner plugin) and leave the old feed intact but point it to my new feed, hopefully eventually Feedburner will tell me the old feed is no longer followed at all and then I can delete it.  For Google Analtyics I decided to create a new profile, but I guess you could just change the domain  in your current profile (if necessary I suggest you do this immediately after you have flipped the switch), then use this plugin that will take care of adding the google code to your template footer (but not when in preview mode for example).

Step 9 – 301 redirect

This is the final step and once you take it your old blog is dead!  Actually not quite true, your blog will live on in Blogger until you delete your account.  I had my own custom domain setup and thinking about it now I don’t know how you’d complete this step without it, I had a subdomain dns cname entry pointing at the google dns server.  So I did the following (all very quickly as once started your blog is down until you finish): logged into blogger and switched back to blogspot.com hosting, in my dns settings I deleted the cname entry, I then created the hosted domain of the cname I just deleted so I could serve up the following .htaccess file:

redirect 301 / http://www.richie-p.com/blog

Now I have this lovely Wordpress blog!

Monday, August 24th, 2009

Fixing broken Wordpress image upload

Just a quick post on this cos I just went through it and eventually I worked it out but I lost a little piece of my sanity there for a while. This probably only applies if you have set your Wordpress up in one location and then moved it. I set mine up to stage it and then I moved it into a different directory to deploy live.

Basically in the admin interface you just have to go into Settings->Miscellaneous and change the ‘Store uploads in this folder’ setting to wherever the new path is, or just setting it to ‘wp-content/uploads’ which is the default seems to work good for me. I think this setting is kind of in a weird spot which is why it was hard to find, like doesn’t it belong in the Media settings?  I actually read out there people saying to make the change directly in the database and I figured that there had to be a way to change that setting in the admin tool, which is the only reason I found it.

Also, make sure you set that folders permissions to give Apache write access (chmod 777 or whatever).

upload _settings

Wednesday, August 19th, 2009

Blog Relaunch

So I finally managed to find the time to relaunch this blog. When I first started the blog it was somewhat of an experiment so I didn’t spend much effort on its design, but unlike other failed blogs I’d started over the years I’ve really been enjoying writing these posts and I think this time around it’s got some staying power. This relaunch is really intertwined with my online rebrand I’ve been talking about lately, this blog plays a big part in my online image and it was important that I spend the time to focus on fixing its issues.

So the biggest areas I wanted to address were:

Domain Name

My old domain ‘blog.londonstreetlife.com’ had many things wrong with it, but mainly it was just too damn long.  The hows and whys I picked this domain are obviously very closely related to my rebrand so I’ll talk about it in another post, but this new domain is half as long and I’m really liking how it looks in the browser address bar.  In fact it’s so short i can pair it with my own URL shortener (instead of using bit.ly, for example) which will only help improve my online brand in the long run.

Switch from Blogger to Wordpress

For all the work I’ve been doing with Wordpress this past year and my subsequent posts on the subject, I’ve felt for a long time I really should be blogging on that platform.  I have nothing against Blogger or any similar web tool, it’s been great to me and I don’t see the need to host the blog myself as long as it provides me with everything I need and doesn’t limit me in any way.  However I have really been feeling the strain lately with Blogger, too many missing features, SEO failings, and little tweaks I am not able to make.  Now I’m on Wordpress and am my own host and I can really go to town with this thing!  Like a kid in a candy store I’m having a lot of fun practicing what I have been preaching and I even built my own plugin which I will be cleaning up and making publicly available soon.

Design

The new design is the most prevolent update as it really changes the whole feel of the blog.  Whilst the switch from Blogger to Wordpress could be completely transparent to the user, and the domain name change might not even be noticed by a user coming in via a shortened link, there’s definitely no escape from noticing the redesign.  I don’t want to get too into the color scheme I’ve gone with as it’s part of my brand color palette that I’ve been developing over the last month, and again I’ll be talking about that in another post.  It’s not yet the finished product I’m sure, I’ll tweak as I go, but time is short for me these days and I’ve found that eventually there comes a point where I just have to pull the trigger or I’ll never get anything done.  It is worth mentioning that whilst I do prefer dark text on a light background for readability purposes I really wanted to bring forth more of my personality into the design, so my words don’t just represent me, but also just by being here you already know a little bit of who I am.  I’m really happy with the color scheme, it is totally me, and it works really well for my portfolio site (in development) where impression is as important as content, but for here where content is king I might find along the way that the sacrifice in readability is too great for a blog and switch it up and around a bit, make it a little easier on the eyes.  I dunno, what do you think?  It’s really up to you guys!

It’s worth taking a moment to talk about my old design and how in a way it was sort of an anti-design, I’m not referring to the art movement but the fact that it was meant to look like I hadn’t spent a lot of time designing it (cos I hadn’t).  But also when I first started the blog I didn’t know where it was going to go or if it would even last so I really needed it to develop a personality before I could style it.  So for old times sake, one last time and forever remembered here, RIP old blog:

londonstreetlifetheblog

Blog Title

And finally the blog title, I’ve been seeing some of my posts come up in Stumble Upon and they’ve been coming across kind of silly – Blogger published the blog name first and then the post title and I couldn’t figure out a way to reverse this setting, so every post of mine that made it into Stumble Upon just said my crap blog name and didn’t give a clue as to what the article was even about.  That’s when I really started to realize that if I want the web to take my blog seriously then I’d better do it first myself.  Before the the title was just ‘my name the blog’, as in ‘londonstreetlife the blog’, which basically ran along the same idea as my anti-design concept above, and again I didn’t know where it was gonna go or how long it would last so I didn’t spend the time thinking up a cool name, and in the end it never eally had one.  The new name ‘Pixels from the Edge’ I think works really well, it kind of means a lot of things at once and they all apply.  I wanted the name to reflect the creative-technology hybrid thing I got going on and is mainly what I talk about in this blog, and I think it does that very nicely.  My lovely wife helped me come up with the name, so mad props to her!  And the more I think about it the happier I am with it.

So what do you think folks, turned out any good?

Tuesday, August 18th, 2009

My Site Added to the Wordpress Showcase

This was a pretty cool thing that happened to me this week. A site I built earlier this year www.thefordstory.com got added the the Wordpress Showcase! See for yourself – http://wordpress.org/showcase/the-ford-story/.

This is especially cool for me for two reasons. Firstly it talks about how it recognizes Fords choice to use Wordpress a social media medium, which is something I myself fought hard to make a reality – PHP is not a language we have previously supported as an agency and in the short time we had to build the site some questioned whether we were biting off more than we could chew, and rightly so, but I felt it was important to move ahead and embrace Wordpress which has become the industry standard for blogging. And secondly because “Ford’s use of WordPress as a CMS is also well done and features a seamless integration of static content, videos, photos, and dynamic updates.”, so the site has been showcased because of the code and functionality, and as the architect of it and the guy that built out the custom plugins I am especially proud. I’ve been involved in awards before, but they’re almost always for creative and design, so this one feels a lot more technical and a lot more personal. Except it’s not an award!

Of course there were many people involved in making this site a reality and we all worked hard in a short space of time to make it happen, so well done to all!

Actually it’s funny too because when it was first announced I was getting emails from all avenues – account, project management, and team leads telling me the good news. And I’m like errr, I already know, Wordpress emailed me directly about it, I’m the one that submitted it!

Thursday, May 28th, 2009

Customizing Wordpress as a CMS finishing touches

My last couple of posts I’ve talked about how to customize Wordpress to create your own theme and templates. As I talked about in this post I feel that Wordpress is a hugely powerful CMS admin system but falls behind with its front-end publishing capabilities. I don’t like how it publishes the HTML and in this post I will give some hints as to how to completely abandon the Wordpress front-end for your own.

Custom Permalinks
By default all pages are created as something like ‘http://www.mysite.com/?p=14′. But Wordpress has it’s own built-in URL parser and router allowing us to make pretty URLs. Click ‘Settings->Permalinks’ in the left sidebar and select the ‘Month and name’ radio button and hit save (don’t worry about the other options, they really only affect the “posts” URL structure and we’re only concentrating on “pages” here).

It creates an ‘.htaccess’ file in the web root, if Apache doesn’t have permission to create this file then you can create it yourself with the following:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

Basically every file that doesn’t exist (media, css, js, etc. files that physically exist bypass the rule) gets sent to the index.php file which does a URL lookup and routes to the correct template.

You can now go and look at a custom page you’ve made and see it has a beautified URL as a Permalink.

Custom Header and Footer
The default Wordpress header and footer does a lot of automatic work. In order to free your code from this I recommend creating you own header and footer. Any functionality that the header and footer contains that you want to keep can be ported over as you need it.

In your theme folder create your own header.php and footer.php files. It’s probably a good idea to save a backup first (even though you’ll probably already have the whole thing backed-up from when you created your own theme, and then get rid of everything in the files you don’t want. For example when I first started experimenting I kept all the boiler plate stuff and ditched the automatic navigation generation and sidebar code. Start with the minimum and work things back in from your template as you need them, if you feel you need them, personally I rewrote everything back in.

Once you understand what you’re doing here you can drop the whole header and footer approach and use a templating engine such as Sigma (which I’ve favored for some time).

Custom Homepage
The final move is to set the homepage as something other that the blog. This is the final key in freeing up Wordpress from being a blog tool dependent on the default code to becoming, well anything you want from a website, backed by a powerful CMS. Of course you will also always have the option to quickly and easily implement a powerful blogging system into your site, but the point is the blog doesn’t actually have to be your site.

In your admin panel create a new page with the title ‘HOMEPAGE’, I recommend to first create a homepage template because a homepage is never like anything else. Once you have that page published navigate to ‘Settings->Reading’ and under the first option ‘Front page displays’ select the second radio button ‘A static page (select below)’, and in the drop-down find the ‘HOMEPAGE’ page you just created, and save your changes.

That’s it, you’re now free to go crazy with your website design and code yet still harness the power that the Wordpress CMS yields! And don’t forget if you want to have a blog in your website, now or in the future, you already have all the tools you could want.

This is part of an ongoing series of posts I am publishing talking about how to use Wordpress as a custom CMS.

Thursday, April 16th, 2009

Create a custom template in Wordpess

1. Open up a new file and add the following:

<?php
/*
Template Name: My Template
*/
?>

2. Save the file in your theme folder with the name of your new template, the filename doesn’t have to be an exact match for the template name, e.g. ‘mytemplate.php’.

3. In the admin panel create a new page. Give it a title, type in some content, and then in the right sidebar under ‘Attributes’, find your new template in the drop down and select it, and publish the page.

4. When you view your new page on your sites front-end you’ll see a totally blank page. This is good and means it’s worked as we’ve not told the template to do anything yet.

5. Go back to your template file and update it to match the following:

<?php
/*
Template Name: My Template
*/
get_header();

get_footer();
?>

6. Now when you refresh your new page you’ll see the header and footer are now incorporated:

7. That’s great but the content from the CMS is still missing. Add the following into the template file between the get_header() and get_footer() calls, save it and refresh the page:

$thisPage=query_posts("pagename=".$_SERVER["PATH_INFO"]);
echo $thisPage[0]->post_content;

That’s it, you’ve just created your own template! You can now continue to develop out your new template and create more pages using that template, and create more templates.

This is part of an ongoing series of posts I am publishing talking about how to use Wordpress as a custom CMS.

Friday, April 3rd, 2009

Create a custom Wordpress theme in one minute

Creating a custom Wordpress theme is damn easy. So easy in fact that when I was originally researching how to do this I didn’t find anything out there that relayed exactly how easy it is. You can find detailed instructions at the official Wordpress documentation, but if you are an experienced web developer and php coder this will give everything you need to immediately hit the ground running.

Assuming you have a working version of Wordpress:

1. Go into your ‘/wp-content/themes/’ folder

2. Copy the ‘classic’ folder and rename it to something that will represent your site (use underscores to separate words and stick with alphabetic characters only – see comment from Ron Fredericks below)

3. In the new folder you just created open the file called ’style.css’

4. In the top of that css file edit the sections within the /* commented out area */. Update ‘Theme Name’, ‘Theme URI’, ‘Description’, ‘Version’, ‘Author’, and ‘tags’ appropriately with your new themes information. (If you can’t think of everything right now don’t worry you can always come back later and change it.)

/*
Theme Name: My Theme
Theme URI: http://www.londonstreetlife.com/
Description: My custom theme.
Version: 1.0
Author: Richard Perry
Author URI: http://blog.londonstreetlife.com/
Tags: Simple gray, two column
*/

5. Create a 300×225 pixels png image with a screenshot of your site, name it “screenshot.png” and overwrite the current one in your theme folder. If you don’t have the design done yet then create an FPO image for the time being, or you can use the one I already made below:

6. Now the fun part. Log into your Wordpress admin section and click Appearance->Themes in the side menu. Now you’re in the themes admin section and you should see the theme you’ve just created under the ‘Available Themes’

7. Clicking either the thumbnail or theme title of your theme will bring up a screen with a demo of your new themes homepage (obviously you haven’t changed anything yet so it will still look life the classic theme.)

8. Hit the ‘Activate’ link top right to set this as your wordpress theme.

That’s it, you’ve just created your own theme! Now you can start making changes to the ’style.css’ file to make it your own.

This is part of an ongoing series of posts I am publishing talking about how to use Wordpress as a custom CMS.

Monday, March 30th, 2009

Using WordPress as a custom CMS

I recently had a crash course in WordPress when I had to build a very custom website from scratch in two weeks from start to finish. It needed to be WordPress because this site will contain a blog that will be handed off to a third party to maintain, and WordPress is arguably the industry standards for blogging software. I wasn’t overly familiar with WordPress, I’d setup a blog or two in my time, but never anything as complex as building a custom theme or plugin. But I basically knew everything I needed to do was possible, I’d read up on being able to create custom themes and plugins and I felt quite confident that I could get done everything I needed to. What I didn’t know really was how I was going to do it, or how it was going to run as a CMS once launched. In the end I was surprised at how easy some things were to implement, and frustrated at the lack of what I would consider common tools.

What I realized pretty quickly were two things:-

  1. The Administration Panel is kick-ass, it’s beautiful to look at and use and takes care of all the administration dirty work you’d have to do if you were writing from scratch.
  2. I pretty much hate the core WordPress PHP code, no disrespect to the people that dedicated so much time to it over the years, but to me and for my purposes it’s a cluster-fuck of a headache.

Look I’m not saying I’m right in this approach, but I’m pretty sure that this approach is right for me. I follow a school of thought which basically says that if you can’t figure it out in less than an hour it’s broken (something I took away from a mesmerizing Rasmus Lerdorf keynote speech at a conference many years ago). And that’s how I felt about much of the “automagic” internals of WordPress, I couldn’t figure them out for shit and I got more and more frustrated as I started to realize that I could be writing this myself from scratch, not just in a clean manner that I would obviously intimately understand, but also in less time that it is taking me to figure out the spaghetti code. I felt the same way with the plugins, that by the time I’d searched through the thousands of plugins and actually found the one that does what I need, and installed it and played around with it, only to find that it doesn’t do exactly what I need at which point I’d have to jump back into the pool of plugins looking for another suitor. Even if I did eventually find exactly what I needed, which lets face it is rarely the case, I could have already written a more suitable and stable plugin myself.

But on the other hand the administration panel WordPress has to offer is truly something of beauty. It takes care of all the user security, roles and permissions, pages and posts with vanity URLs, WYSIWYG editors, media uploads, and comment moderating, just to mention a few of it’s highlights. Basically all the rudimentary crud we have to worry about when building a CMS from scratch, shit in my line of work the admin panel is often more complex than the front-end. And not only is it solid in it’s task, so that you can feel comfortable that it’ll do its job without having to peek under the hood, but it has some sprinkles of scriptaculous and ajax so it also does it sexy. And couple that with the fact that it’s extremely easy to implement your own custom menu items and modules to the panel makes for a great application.

So I basically ended up writing my own front-end. I got familar with WordPress and found all the functions I needed to pull in the information I was generating with the admin panel. I’d like to write about how you can get setup up with all the basics you need to get up to speed with where I am at with all of this. I’ll hopefully accomplish this by exploring the following topics over a number of entries:-

  • Create your own theme
  • Custom homepage
  • Making plugins
  • Understanding pages
  • Meta tags and custom fields
  • Custom RSS file

By the way the WordPress site I built is www.thefordstory.com

Saturday, March 7th, 2009