Ohmystinkinheck

If you didn’t notice in the navigation bar above, I’ve created a WordPress Wednesdays Archive. So, if you’ve just come along and need to catch-up or you’ve been here all the while and may need to find previous posts from time to time, I’ve tried to make it a lot easier than wading through all my other non-WordPress-related entries.

Get it? Got it? Good.

As I stated in last week’s edition of WordPress Wednesdays, the default WordPress theme is boooooooring. Even its designer, Kubrick, doesn’t use it. That oughta tell ya something, don’tcha think?

Case in point.

Never fear, you have choices upon choices upon choices for themes. Seriously, your eyes will dry up and roll out of your head before you’ll see the end of WordPress theme choices - and then, of course, there is your own jazzy ideas that can extend any theme into an original piece of blogwork you’ll call your own.

Where can you find this endless procession of WordPress themes?

Ready, set, bookmark!

• First, I wanted to plug mine and Jessica’s theme, Oh So Very! Not only is it smart, well-coded, as well as XHTML and CSS Valid (muy importante - we’ll talk about why in a bit), but it has 3 columns - perfect for monetizing your blog.
• Next, there is the popular WordPress Theme Viewer, where you can peruse through literally hundreds of themes.
• Want your own slammin’ customized theme, but don’t want to pay a designer? Consider Template Monster. As with the WordPress Theme Viewer, each blog theme at Template Monster, offers a click through to view the blog live in your browser, The blog themes at Template Monster are not free, but reasonably priced, beginning at $49.00 for a non-unique purchase (others can purchase it after you) to $700.00 or so for a unique purchase (guarantees that you are the last person to buy the template). Considering a blog design or re-design will run you anywhere from $1000.00 to $3400.00, that isn’t as pricey as it may seem.
• If you’re looking for that Web 2.0 look, freewpthemes.net has a few I like.
• I think you get the picture - there’s a lot out there. All you need to do is Google FREE WordPress Themes and you’ll be combing sites for hours. HOURS, I tell ya.

Set Some Standards for your WordPress Theme

Before you start your theme download frenzy, and believe me you will, stop to think about a few things.

1. What are you doing with your blog? As in … what is your blog about? Are you blogging about politics, homeschooling, parenting, weight loss, fashion, the state of the orange mold in your shower? Because obviously your theme needs to reflect your focus. I know this may be a “given” to some of you, but if you are writing about the mistreatment of our bovine buddies in the cattle industry and you select a serene, aquatic looking theme, you’re gonna stump your readers. They may not even recognize that you’ve visually retarded their experience, but likely they won’t subscribe and return for your subsequent posts. And we ALL LOVE READERS TO RETURN. I know it is hard to figure out who you are in blogland, but do it. And if “who” you are changes, change your theme to match your newly desired audience.
2. Will you be monetizing your blog? Most likely if you are just starting out, monetizing isn’t going to be your biggest concern. The idea of making oodles upon oodles of expendable (ha!) cash with your blog is darn near titilating, but be realistic, it takes a while to draw the traffic to make that kind of moolah. However, be a planner. If you want to run ads on your blog, decide which type of ads (images or text?), where you want them (do your homework - some places are better than others), and how wide and long they’ll be. Once you have all that locked away on your mental checklist, THEN search for a theme that fits your need.
3. Do you need it to be widget ready? Or maybe I should call this part “know thyself”. If you do not want to learn code - or want to only learn enough code to make a few changes here and there, you’ll want to look for a theme that is Widget Ready. A Widget Ready theme allows you to edit your WordPress sidebar without knowing code. It works a lot like dragging and dropping files into folders on your PC. If you want more details, read about Widgets over at WordPress.
4. Think about XHTML and CSS Validity. Finding a Valid WordPress theme matters. It isn’t just my anal retentiveness that says so either - WordPress says validity is important too. But don’t just take mine and WordPress’ word for it. You can read convincing arguments here and here. I’m a stickler for order and I want my blog and website designs to receive the benefits of validation. What are the benefits?
   • Faster load time. If your visitors’ browsers don’t have to try and figure out/correct your site errors, your site will load faster for them. And we all know how delightful a quick loading site is, right? We also know how we’ll click OUT of a painfully slow loading site.
   • Cross-browser compatible. Just because I like to use a smart browser, doesn’t mean everyone does. Some are still using IE (God bless your little souls) and then, of course, there is Safari (primarily Mac users - “Hi Mac users! We love you!”), Netscape and Opera to name the most used. Just because your blog renders well in YOUR select browser, does NOT mean it renders well in others. However, if you keep it valid, the likelihood that all your visitors are seeing the same thing is higher. Unless they are using IE 6.0 - in which case, YOU PEOPLE NEED TO GET OUT OF THE STONE AGE AND UPGRADE. There, I said it.
   • Accessibility. You WILL have disabled visitors - make it easier for them. Read a great write-up about Web Accessibility at Wikipedia.
   • Search Engine Optimization. Oh yea, this is the good stuff. Valid blogs make search engines happy. Okay, so nothing makes search engines happy - algorithms just don’t smile. It will, however, make you happy if you can GET in Search Engines. So, make yourself happy - validate.

   Seriously folks, don’t knock validity.

Installing your WordPress theme of choice.

Hopefully you’ve found and downloaded at least one theme you adore or, at the very least, can live with until you can figure out how to make some of the changes you’d like. Good, good, good.

Guess what? SO DID I. I’ve selected Mr. Techie to use over at my demo WordPress Wednesdays site. It is bright and chunkie and oh, so roomie. Plus, my main purpose with the WordPress Wednesdays blog is to teach WordPress through tutorials, and I see a lot I can do with this theme.

Downloading and unzipping the WordPress theme of your choice.

When you find your theme, you will be given a download link. WordPress themes are compressed into zip files for faster download. So, once you select your theme, click to download and then save the theme within the /themes/ directory of the WordPress files you should have saved on your hard drive.

I downloaded the zipped version of the theme I selected and you can see the full path to the /themes/ directory below.

This means that I am saving my theme to my hard drive within the Documents and Settings for /owner/ (which is me). Much of my daily files are organized under the /My Documents/ directory. From there, I have /My Webs/ for any and all websites I work on. Then, I have /My Websites/ or /My Clients/. This is clearly one of /My Websites/. And you see it is under
/My Websites/wordpresswednesdayscom/wp-content/themes/.

When I save it, to that directory, the zipped up file will show alongside the standard default themes that come with every WordPress download.

I need to decompress/extract the files from that zipped folder before I can upload them to the server, so here’s what I do on my PC.

Right click on the zipped file, scroll until I see “Extract All” and click.

This opens the Extraction Wizard. Click the “Next” button in the Extraction Wizard pop-up window to proceed.

Here’s a tip: The Extraction Wizard will automatically place your unzipped/extracted file in the same directory you are in, so you need not worry about browsing and finding the correct directory. When you get to this 2nd window of the Extraction Wizard, just click “Next” again to proceed with the extraction of your WordPress theme files.

When it is done extracting your compressed file it will look like this.

See that check-box with the words “Show Extracted Files”? Uncheck it. All it does is pop-up a window with your extracted files in it when it closes the Wizard window. There really is no need to view them - you just want to extract them at this point.

And now this is what is in your /themes/ directory. You have both a copy of your zipped file and your extracted theme files. DO NOT TRASH YOUR ZIPPED FILE. It is VERY important to keep an original of your theme. Consider it a back-up for if you truly mank-up a file. Keep it nice, neat and zipped and keep it here - that way when you need it, it won’t be far.

Now, there’s only one little (eensy-weensy) irritant left. If you click through your theme’s extracted directory (in my case, /mrtechie/, you’ll see that it holds within it yet ANOTHER theme directory of the same name. This ALWAYS happens when extracting compressed files. All of the Wordpress files for your new theme are located within the 2nd theme directory.

You don’t need this double-click, so here’s what you do to streamline your clickage in the future.

I’ll use my /mrtechie/ directory in the directions below for clarity.

1. First, I click to the 2nd theme directory within the first directory of the same name. In other words, from the window above, I’d click into /mrtechie/ so I could view the 2nd /mrtechie/ directory.
2. Then, I’d right click on the 2nd /mrtechie/ directory and select “Cut” from the drop-down menu. You can do this also by using CTRL X on your keyboard.
3. I’d go back to my /themes/ folder and right click somewhere within that window and select “Paste” from the drop-down menu (CTRL P) to paste that directory OVER the current /mrtechie/ directory. This is the same directory that shows the zipped version of Mr. Techie.
4. A pop-up window will alert me that the folder already contains another folder named “Mr. Techie” and ask me to confirm whether or not I still want to move or copy the folder over. I click that “Yes” I do.
5. That’s it.

There, now I don’t have the additional click of a folder within a folder of the same name. Minor irritant avoided. We’re ready to upload the WordPress theme to the server now. Weeeeeeeee!

Uploading your WordPress Theme

Just so you know - this is a breeze. You don’t have to be a computer science geek to get this stuff. Last week I told you how to download Filezilla. If you haven’t done that already - you need it, so check the quote below for specifics on how to do that and join us when you’re done. If you use cPanel, your web host’s file manager, or any other independent FTP that’s fine too. The images below will differ, but the content is basically the same.

Ready? Set? Break.

I use Filezilla which can be downloaded FOR FREE. If you follow that link and click on the “FileZilla_3.0.0_win32-setup.exe” text-link, it’ll begin the download. Ask it to save it to your desktop and run the install from there. It is quick and easy to use in accessing your server files.

Reference: WordPress Wednesday: Dashing through the Dashboard

Open Filezilla’s Site Manager and log into your server. Remember, in the dual window within Filezilla, your server directories and files are on the right and your hard drive directories and files are on the left. So, first thing we need to do is get to the directory on your hard drive (on the left) that is storing the theme to upload. That particular directory is called /wp-content/.

The name of that directory is pretty self-explanatory. It houses all the WordPress (wp) Content (-content) that you’ll need to manipulate at any given time. You will hardly ever, if ever, mess with the others.

Double-click on the /wp-content/ directory and find the /themes/ directory.

See where we’re going with this? Almost there. Double click the /themes/ directory and you SHOULD see your new theme you just downloaded and extracted waiting right there for you. Yep, there’s /mrtechie/.

Can’t upload yet though, because I’m only in the right directory within the hard drive window. Now, I need to follow the same path and find the /themes/ directory in the right window (server directories and files).

Find and click through the /public_html/ directory and you’ll see the /wp-content/ directory. Then, just follow the same path we followed in the left window to find the /themes/ directory.

You’ll know when you’re there because both of your windows will match up. Remember how I talked about how important it is to mimic your hard drive directories and files to your server directories and files? This is one of the reasons I gave. The more alike they are, the less likely you are to confuse directories when uploading files.

To upload your new theme, right click on its directory and select “Upload as…” from the drop down menu. It will automatically upload it to your server within the /themes/ directory you have opened.

Once uploaded, the only difference you’ll see between your hard drive and the server is your hard drive has a zipped up version of the theme and your server doesn’t.

See.

I told you this would be easy. Now, I’m thirsty. Get up, stretch your legs, pop your back, go to the restroom, or whatever and take 5. When we get back, we’ll select the theme using your WordPress Dashboard and you’ll be on your way to displaying a fresh new theme on your new WordPress blog.

Selecting your Theme within the WordPress Dashboard

This is where it gets really, really easy. So easy in fact, that I doubt you need me for it. Let’s log into the Wordpress Dashboard and select our theme we just uploaded.

If it doesn’t take you directly to your Dashboard, you’ll be redirected here and remember to click “Remember me.” or you’ll see this login page each and every time you want to get into your Dashboard. I realize that might not be annoying for you, but I personally prefer as few steps as necessary.

Ahhh, the Dashboard - where it all begins.

See up top where you have all those choices of dark (navy-ish) blue tabs? Find and click on “Presentation”. It will take you to the Theme Editor area where you will see the most current theme, WordPress Default 1.6 (Kubrick’s blue default), under the header “Current Theme” and both your theme you just uploaded, as well as an additional default theme, WordPress Classic 1.5, under the second header “Available Themes”.

I’m a tad confused at the moment, because as you can see, the theme I selected and downloaded here, does not seem to be the same theme I’m seeing under “Available Themes” if the thumbnail is any clue as to what it will look like.

Hmmmm …

Sometimes this may be the case if a designer has upgraded a theme without replacing the screenshot.png file within the theme’s directory. Sometimes the wrong file is linked to the download, and you’ll have to write the designer to get the correct file. Either way, you’ll have to select the theme and then view your WordPress blog before knowing which of the two options above it may be.

To select your theme, you need only click on its screenshot and it will move from “Available Themes” to “Current Themes”, like so…

And here comes the exciting part. View your theme live by going to your WordPress Blog’s URL or by scrolling to the top of your dashboard and clicking the text link in the header that says, “View Site”. Here’s the WordPress Wednesday site after I selected the new theme I uploaded.

If you like, you can view it live, right here: www.wordpresswednesdays.com.

I’m happy to see that the theme I uploaded was correct and I didn’t have to chase down the correct theme. It unnerves me a bit that the screenshot is wrong - enough that I might replace it myself. We’ll see.

I can see something I don’t like already. See how it truncated my first post? I DO NOT like that. I’ll show you how to fix that - or vice versa (perhaps you really like having your words cut off mid-sentence by a random character counter … I on the other hand, do not). I’m all about control - that and aesthetics.

We got a lot accomplished today. Play around with your new digs. GET FAMILIAR with them. I’ll meet you here next week for our next tutorial. Comments are wide open for questions.

18 Responses to “WordPress Wednesdays: It themes we need a theme”

1. Angella

   These are awesome, Heather! And you are SO GREAT for sharing your knowledge with everyone :)

   xoxoxo

2. Ang in TX

   OMSH, I love learning the right way to do this rather my click and discover methods. Thank you!

   Is there anyway to check on my slandering of a theme without actually going into wordpress and selecting the theme for my site?

3. Shawna

   I know I seriously need to get a life, but I can’t WAIT until next Wednesday! Keep ‘em coming!

4. OMSH

   Ang in TX - Okay, I WANT to answer your question, but I don’t know what you mean by, “slandering of a theme”. Can you clarify?

   Heh heh - did you speak badly about another theme? You bad, bad girl.

   Shawna - we geeks truly have to stick together. :)

5. Ang in TX

   Well, I have gone in and changed up some (okay many) of the files CSS, header, index along with a few other files… I call it slandering for I don’t know what the heck I’m doing but I really didn’t like this 3 column theme. :) Now that I know about Oh so very I may just have to start over…

   The theme still loads but I was wondering if there was a way to check it without having to select the theme and run the risk of my visitors viewing my errors while I was checking on my progress

6. Jill - GlossyVeneer

   Mr. Techie is a cute theme for your Wordpress Wednesday stuff. I really need to take the time to build an entire theme from scratch myself, but it’s so hard to convince myself to spend evenings doing that after all day on the computer. But I’m thinking I might try to place my work’s new release info into WP, so that would give me a chance to play more extensively!

   You’re way cool for doing this. Of course, you’re way cool anyway!

7. OMSH

   Ang in TX - No, really no way to check it unless you create a sub-directory and install a blog on it for “testing” purposes.

   That is what I do in the middle of the night. I call it mischief. :)

8. WordPress Wednesday

   [...] far in week 1, 2, & 3 she has discussed - organizing WordPress files, understanding the WP Dashboard, setting your blog [...]

9. julie@thedailycastle

   I love these tutorials. But I get a little confused because I am a mac user. Do all these steps still apply to those of us that have drank the kool-aid?

10. OMSH

    Julie - Yes, mostly. For instance, Filezilla is used the same way. Most everything applies no matter what - the “way” you do it (for instance Mac Users don’t hit CTRL X) may be different, but WHAT you do is the same. :)

11. Celeste

    Alright, after listening to you, Jess and my husband (also a graphic designer) wine and complain about IE vs. Firefox, I downloaded and installed firefox. All by myself.

    Oh, and thanks for the wordpress tips. Just about to launch my own new blog. Again, all by myself! (With your tutorials and my husband in the next room to get me out of scraps….or stupidity, which is much more likely.)

12. elysa

    I see that the trackback showed up in the comments but I just wanted to say I am enjoying your tutorials so much I wrote about them on my blog. I am a mac user as well, wouldn’t have it any other way!

13. OMSH

    Celeste - Ahhhh … the learning process is awesome b/c the platform rocks the house! :)

    elysa - Yes, I saw that! Thank you! Oh, and I plan to be a Mac user right after we pay for broken teeth and glasses for my 10 year old. Geez louise.

14. WordPress Wednesdays: Feed Me Baby!

    [...] directory. If you don’t remember how to extract a zipped file, there are directions within last week’s post when we extracted the zip file of a theme and uploaded it to our /themes/ directory on the [...]

15. Celeste

    I have a question about last weeks WordPress Wednesday thing. So if we have a family blog already up at our site, and I want to do a completely new blog on my own on the same site, with a different theme and everything, all I have to do is download another WordPress and put it in it’s own /directory/? And it won’t mess up the first blog?

16. OMSH

    Celeste - YEP! How’s THAT for rockin’ the WordPress house?

    You can name it /blog/ or /family/ or whatever!

17. arlette

    http://www.reforma-pensiilor.ro/phpBB2/viewtopic.php?p=27006&sid=26b39c7dd6dd4a5c3a8d82c536aceaf3

18. bettina

    http://www.kyscorp.com/board/viewtopic.php?p=36356