Making your blog your homepage (redirecting it)

Now that I’ve got quite a bit written and got rid of the defaults, I’m pretty okay with displaying my site to the rest of the world. However, because I set my blog up in a folder called “blog”, if you want to see my blog, you need to go to http://www.blogmaking.net/blog/. I’d like everyone who goes to http://www.blogmaking.net to see my blog straight away. To do this, I’m going to have to do a redirection.

If you set up your blog in your main folder then ignore this step because when people go to your domain http://www.yourdomain.com they should just go straight to your blog already.

Micfo’s cpanel is really easy. You just need to click on the “redirects” icon. You are given two boxes, the first is the domain you want to map (so in my case I would leave it as htpp://www.blogmaking.net/ and then nothing as I want the homepage to redirect) and then you give the address you want to redirect it to… so I put in www.blogmaking.net/blog/ because that’s what I want to show up in the browser.

I’m still trying to work out the dreamhost redirect. I’ve put in a help ticket so hopefully they’ll get back to me soon.

Edit: They did get back to me and did the redirect for me which was really nice. It was a simple little trick that I imagine would work with other folders (eg if you have set up another content management system like drupal in a folder called “drupal”). They created a php page: index.php and stored it in the root folder (ie the main folder not the blog folder if you have them separate). To do this open a text file in something like notepad or another plain text editor and type the following code:

<? Header (”Location: http://blogmaking.net/blog”); ?>

where “http:blogmaking.net” is your domain name and “blog” is the name of your wordpress folder. Save this file as “index.php” and upload it (via FTP or your host’s web file manager) to your root/main folder for your domain.

Installing a theme

The basic steps to installing a theme are:

1. Find a theme. I’m going to go with this one for now: WP- Andreas01 1.3

2. Download the theme to your desktop. It will probably be a zip folder, if so unzip/unpack it.

3. Check for any read me text files or the theme’s homepage for any additional instructions. Most of the time there won’t be any.

4. Upload the theme folder using an FTP program or your host’s web file manager to the “themes” folder inside your “wp-content” folder (you’ll find this in your main blog folder).

5. Once uploaded, go to Presentation/Themes and your new theme should be listed. Click on it and it will be applied.

6. Check for compatibility with your new theme.

Eg In WP- Andreas01 1.3 there is no Links template so the Links link doesn’t give you a Links summary, but the archives link doesn’t work but THERE is an archives template so this might be a bug. In the comments on the theme homepage there was the following suggestion:

Fixed it.

Replaced line 19 in archive.php

“Read more »’); ?>”

with

“”

But I didn’t find that it worked. And strangely enough, in my Write Page I lost the ability to apply templates to pages. Grrrr… It’s a lovely looking theme but I’m feeling too lazy to try and work out the problem. I believe version 1.5 of the theme is soon on its way, so I’ll wait for then.

So to uninstall the theme, you can just click on another theme in Presentation/Themes and that will change it to something else, but if you want it off your server, just delete that theme’s folder in your “themes” folder in “wp-content” in your blog folder.

I redid the steps with the very simple and elegant BlogTxt and while I was there I also installed the Sandbox theme, which gives you a great foundation for customisations… I’m going to be tinkering around with that one later but it doesn’t hurt to have it installed now even if no one sees it yet. (Both these building block themes are from plaintxt.org.)

Choosing a new theme

The hardest job is choosing a theme! Fortunately there are sites that have gone to the trouble of compiling lists of many of the available themes out there. Here’s a few that I find particularly useful:

WordPress ThemeViewer: Has some nice sort functions and you can click on “test run” to give you a live working example of the theme.
WordPress Theme List: List of themes sorted by number of columns amongst other criteria. Also gives a list of widgets plugin ready themes (but you can find out more widget ready themes here).

How to Blog’s Comprehensive list of 980+ themes: This is huge and conveniently lets you know whether it’s WP2.0+ compatible, number of columns and whether there’s support for Widgets or not.

Alex King’s theme browser: I think these themes come from Alex’s theme competions. There’s heaps and you can quickly see what each theme will look like.

There are also quite a few sites that blog about new themes like Wordpresstheme.com and BloggingPro. For examples of interesting/lovely themes (but not necessarily ones you can download), check out WordPress Garden.
Stuff to be aware of when choosing a theme:

  • Support for WordPress 2.0
  • Support for the Widgets plugin
  • Support for other plugins, nifty features
  • Number of Columns
  • Page templates included (eg archives/links) - you can make these yourself but it saves time and effort if they’ve done it for you
  • Special stylesheets, eg for print or mobile
  • How easily customisable is it? Some themes come with a Photoshop file so that you can easily insert your own images into the theme.

Backing Up

Once you’ve activated the preinstalled WordPress Backup plugin, go to Manage/Backup to access your backup options. You have a choice of saving it to the server, downloading a copy or emailing yourself a copy. I would choose to download a copy or email it because saving it to your server won’t help you if your server fails.

Backup panel screenshot

Note that this method doesn’t backup your themes, plugins or any modifications that you may have done to them. When you do any major design or plugin changes, you should also make a copy of your themes and plugin folders (you can find them in the wp-content folder)… use an FTP program like FireFTP or your host’s web based file manager to do this.

Activating Plugins

WordPress comes with a few plugins installed but not activated. You can add more later, but the most important plugin to activate is the WordPress Database Backup as backing up is THE most important thing that you do as servers DO fail and WordPress does stuff up.

Activating a plugin is really simple: go to your Dashboard and click on Plugins/Plugins and you will get a list of plugins. Next to each one, you’ll notice either an “Activate” or a “Deactivate”. To activate the plugin, just click “Activate” and to deactivate it, click “Deactivate”. ALWAYS only activate ONE plugin at a time. That way if you get any incompatibilities you know which plugin is doing it.

Activating a Plugin

Changing Themes

WordPress separates the content of your blog from its layout or appearance through the use of templates and css files bundled together and called themes.

The default WordPress theme is currently the Kubrick theme. I will have probably changed this site’s layout since, so here’s a screenshot of blogmaking.net with the default theme:

Screenshot of default theme
To manage and change your themes, go to your Dashboard and click on Presentation/Themes and you’ll see all the installed themes that you have. WordPress also comes preinstalled with another theme: WordPress Classic 1.5.

Screenshot of theme management window
To Switch Themes all you need to do is click on the thumbnail or the title of your chosen them in the list of the other available themes and this will apply it to your site. Check out your site’s new theme… here’s blogmaking.net with the WP Classic 1.5 theme:

Screenshot of classic 1.5 theme

I don’t know if you can tell from the screenshot but this theme doesn’t automatically shrink images to fit the width of the post, so I’m going back to the default for the time being. You can easily switch back by going to the Presentation/Themes panel and clicking on your old theme.

Once you add more themes, it’s the same process to activate your new ones.

Adding Video (YouTube or Google)

To add an embedded video from a site like YouTube or Google Video, you need to first look for the embed code on the video’s homepage. If someone has embedded a video that you like on their website, usually clicking on it will bring you to the video’s homepage on YouTube/Google Video.

On YouTube, if embeds are allowed for that video, you’ll find the code in a box called “embed” next to the video. For example, if you go to the homepage for this silly pug video, you’ll find this bit of code under “embed”:

<object height=”350″ width=”425″><param name=”movie” value=”"><em>=”http://www.youtube.com/v/l9l19D2sIHI”&gt;</em><param name=”wmode” value=”transparent”><embed xsrc=”http://www.youtube.com/v/l9l19D2sIHI” mce_src=”http://www.youtube.com/v/l9l19D2sIHI” type=”application/x-shockwave-flash” wmode=”transparent” height=”350″ width=”425″></object>

How to find the embed code for YouTube

You’ll need to copy and paste this into your html (not rich text) editor. If you’re using the rich text (visual rich) editor which is the default option, you’ll need to click on the button that says “html” and paste it into the popup window and then hit Update. WARNING, it can do strange things to your layout if you cut and paste straight into the rich text editor (if this happens, delete the post).

HTML button in Rich text editor

In Performancing, the rich text editor is the tab with “A” on it, the html editor is the tab “<A>” - the html tab is the one you want to paste this video code into.

Performancing HTML Editor tab

In Google Video, you have to click first on a big blue button next to the video that says “Email-Blog-Post to MySpace” and then click on the “Embed Link” link and you’ll find a box appear with the embed code to copy and paste. For example if you go to this Google video ad for the 2006 Machinima.org comp, you’ll find the following embed code:

<embed style=”width: 400px; height: 326px;” id=”VideoPlayback” type=”application/x-shockwave-flash” xsrc=”http://video.google.com/googleplayer.swf?docId=-5049322100593461897&amp;hl=en-AU” mce_src=”http://video.google.com/googleplayer.swf?docId=-5049322100593461897&amp;hl=en-AU” flashvars=”">

How to find the embed code for Google Video

You’ll need to copy and paste this into your HTML editor just like the YouTube video explained above.

BEFORE you attempt this, a big word of WARNING. There is a big bug in some versions of WordPress (including the current versions 2.x) which means when you paste the embed code in the html popup in the rich text editor, the embed copy and paste just disappears once you hit “Update” so you can’t embed any video. If you find this is happening and you probably will, either just use Performancing (remember to paste it in the html editor tab) or you will have to play around with your WordPress settings to switch off the rich text editor. Go to Options/Writing Options and make sure “Users should use the visual rich editor by default” is UNCHECKED.

The Visual Rich Editor is swiched off

Then hit “Update Options” and you should be able to paste your embed code straight into your post and have it show up (remember there is no html popup because you are editing the html already). When you’ve got your video up, you might like to go back to Options/Writing Options and reselect the visual rich editor. But beware, sometimes going back and editing your post in the visual rich (rich text) editor can cause some strange errors. If that happens, delete the post and start again in the html editor.

Here’s the YouTube video:

Here’s the Google video:

Setting up a test site

It is a good idea to create a separate test blog to try out themes and plugins and other modifications that catch your eye without disrupting your real blog. Just go through the instructions for setting up a blog again, only name the wordpress directory “test” (eg http://domain.com/test/) or some random string if you’d like a little privacy for your tinkerings (eg http://domain.com/xkcd/)*. If you accidentally “break” the blog and can’t resolve the problem quickly, all you have to do trash the test blog and reinstall it.

If you were really pedantic, you could set up a couple of these, using one purely as a playground with the other set up as a technical mirror of your blog (it doesn’t need to have all the content though), so when you decide you like a change enough you can apply it to your mirror blog, and see its effects, if there are no problems then add that change to your real blog. If you do the change first on the mirror blog with every little technical change you do on the real blog, then the mirror blog will always be technically identical.

* as you may have noticed from a previous post, xkcd is actually the name of one of my favourite webcomics… check it out! http://xkcd.com

Essential Firefox Blogging Extensions: Performancing and FireFTP

I stopped using Internet Explorer over a year ago in preference for Firefox (I’m half half with Safari and Firefox on the Mac), I love it and all the cool extensions you can get for it. IE6 was unbearably clunky and the whole registered Windows users verification thing to download IE7 was just such a turnoff (I installed it on my Windows computer but it all seems too much like spyware for me… it completely put me off using it).

Long story short, I love Firefox and totally recommend it for all your blogging needs. To download the latest version go to: http://www.mozilla.com/en-US/firefox/

Extensions are really easy to install, mozilla.org has a whole list of them, click on the “download extension” button and then restart Firefox, yay, it’s installed!

My top two blogging Extensions are:
Performancing: https://addons.mozilla.org/firefox/1730/

Performancing for Firefox is a full featured blog editor that sits right in your Firefox browser and lets you post to your blog easily. You can drag and drop formatted text from the page you happen to be browsing, and take notes as well as post to your blog.

I couldn’t live without Performancing, it lets you toggle back and forward from rich/formatted text editing to html fixing. There’s a few things that you can’t do (yet) in Performancing like change authors/dates or use the functionality of any plugins you’ve added to WordPress but you can add categories and Technorati tags as well as save in drafts.

The best thing about Performancing is that it makes posting really easy, it remembers your password so you can just start typing, you don’t need to go to your blog and log in (could save you hours and days over your blogging lifetime…). If you’re blogging on a webpage, you can view the page at the same time as you blog. Selecting text and then right clicking gives you the option to send that snippet complete with page link straight to the Performancing editor.

screenshot of right-click with performancing
Performancing Screenshot
Performancing is also a brilliant tool to manage multiple blogs. It works with a number of major blogging systems not just WordPress (eg I have my Blogger blogs on there as well). You just select which blog you’re writing to (before or after you’ve finished your post) and click “Publish” and it goes straight to that blog, no passwords or logging in! Brilliant! It will also give you the past 10 posts in each blog and the categories you posted under, and you can go back and post changes as an edit.

FireFTP: https://addons.mozilla.org/firefox/684/
This a free and great FTP program that works through a Firefox browser tab or window. I love it and is essential for uploading theme and plugins to your blog’s directory and other general uploading/deleting tasks that pop up when you’re developing and maintaining your site. It can save your passwords and just make the whole FTP thing breezy and less of a chore.

It is actually charityware so if you find it useful, you’re encouraged to donate to its development, half of the amount goes to supporting orphans in Sarajevo, Bosnia & Herzegovina.

Making in-text links (and solving a Firefox problem with the link popup)

You can make in-text links by selecting some text in the rich text editor and then clicking on the link button (it looks like two joined links of a chain, if you hover over it, it says “Insert/edit link (Alt-a)”) and then filling out the form with the link and a description.

Making a link
It also gives you the option of opening up the link in the same window or a new one. I like to choose the same window because it’s easy enough for people to override it and open up the link in a new window if they’d like but the reverse is much harder. If you want to get rid of the link, select the linked text and click on the button that looks like a broken link chain (hovering gives you “Unlink (Alt-s)”) and this will remove any links from the text.

screenshot of unlink button
If you’re not using the rich text editor, either use html (I’ll create a crib sheet shortly), or highlight the text and click on the “link” button, filling out the link location as requested.

Insert link in html editor
This might be a good place to point out an apparent bug (it actually isn’t a bug) with Firefox. I used to have a problem where when I clicked on the link button, I’d only be able to see half the popup window and couldn’t make it any bigger. This was really annoying and meant that it was impossible to edit links because you could only see part of it. Apparently this has something to do with the JavaScript settings in Firefox. If you go to your Firefox Options/Content/Advanced (JavaScript Settings) and make sure “move or resize windows” is checked. Also I think “raise or lower windows” should be checked (but try fiddling around with these setting until it works for you).