Tag Archives: WordPress

Moving WordPress Content

WordPress couldn’t really make moving content much easier. These are the instructions for importing and exporting WordPress blogs (or sections of blogs) from one location to another. Click on any image to see enlarged.

1. Export your old blog. Login to the Dashboard. Go to “Tools” (on the left), and then “Export”.

2. Decide which content you wish to export. (You can see in this photo I chose all of the posts that were written by me for now.) Then press the “Download Export File” button. Pay attention to where you save the file.

3. Import content to your new blog. Login to the Dashboard. Go to “Tools” (on the left), and then “Import”. Choose “WordPress”.

4. Click browse and find the exported file from your old blog. It should be a .xml. Then press the “Update file and import” button.

5. Then you have to choose a user to be the “author” of this content. I chose myself. Remember to check the “Download and import all attachments” if you have a lot of pictures and stuff.

(For some reason, I had to import this twice in order for it to download my pics and stuff.)

Optimize Webpage Response Time

How fast does your website load? Here is a webpage load speed test from Pingdom Tools that you can use to see about where your site stands and get a good overview of all of the files that are actually being loaded by your visitor’s browser. Click the image on the right to view the screenshot of all the junk I have loading on my homepage.) Google also has a collection of page speed tools.

I am really noticing this more lately because I have been cleaning up darkbluesun.com and struggling with my page loading speeds. GoDaddy.com is a decent host at times. Yet, some days I have had nothing but problems due to how slowly WordPress runs (probably due to how long takes to connect to the Godaddy server “grid” and retrieve info from the MySQL database service needed to run WordPress).

Other than switching web hosting providers, here are 2 ways to test and 3 steps to speed up your web page load speed.

  1. Correct HTML or Other Code Errors

    I went to W3C’s Markup Validation tool online to test my website for errors and discovered I had 37 Errors, 3 warning(s) to sort out for my webpages.

    I fixed a few of these errors. I knocked the number down to 23 Errors, 2 warning(s). This really isn’t much except you can consider the fact that your browser is now going to throw 14 fewer errors when opening my page.

  2. Reorganize (Maybe Even *Gasp!* Delete) Content

    I am a strong believer in this rule: Never Delete Old Content. I always advise bloggers to update the information in a new post and then link to the updated version from the old post.

    Unfortunately there are some things that are simply necessary to get rid of. For example: it is perfectly okay to leave a few of those bells and whistles out of your site. If you never use the chat widgets or java-based plugins that wind up taking up space, bandwidth and precious time… then get rid of them immediately.

    Some of the WordPress plugins I am using for different functions on my website are causing the rest of those errors I was talking about earlier and I am not going to take the time to debug all of that before I post this. However, if I really needed to dramatically, instantly change the page speed of my site, I would uninstall the WP Cumulus and Sociable plugins on my site.

    Break up large posts into separate smaller posts.
    Yep, this tip is self explanatory. If you have lots and lots of data in one post, then that page will obviously take longer to load. If you divide the information into smaller amounts it will help both your readers if they are looking for a quick answer to their question and it will help the search engines index you more efficiently.

  3. Know How to Insert Images

    • Get in the habit of using relative links to your img src’s than absolute links. E.G.:
      instead of:  img src=”http://www.darkbluesun.com/logoDBS.png
      use this:   img src=”/logoDBS.png
      Relative URLs are obviously shorter than absolute URLs, as a result the file size of the web page would be a bit smaller as well.
    • Give images height and width attributes. This way, browsers can load the page completely giving a space for the image without having to wait for the images to load first.
    • Resize larger images to “web-friendly” sizes. Microsoft Office Picture Manager uses 2 defaults for standard website image sizes:
      large: 640 x 480 px
      small: 448 x 336 px
      With modern digital cameras and larger megapixel abled phone cams, the resolution of the pictures you are posting could be huge! Even if you give a large photo a smaller height and width attributes the browser still has to load the entire picture.

Please Note: Some of these changes will only help your pages load a few seconds earlier.

Every little bit counts when according to the September 14, 2009 press release, published by Akamai: users will only wait 2 seconds for a page to load before clicking (or pressing that dreadful back button) out of your webpage… never to return again?

Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times
September 14, 2009 – Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times

Website New Layout: Step Two

The advice I am sharing here is geared toward personal and startup blogs. Anyone with a professional or ecommerce blog: Hire a professional developer or purchase a theme geared for professional use.

I had to get a new theme.

I started this website using the old “default” theme that was based on the Kubrick WordPress theme. It was about as basic as I could get it while I was working on my PHP and CSS development skills.

This is my screenshot for step 2:

This still needs QUITE a bit of work, but the menus, and some of the errors I left until “later” have been cleaned up a bit. The layout is improving from step 1.

Why it’s good to go with a theme that is close to what you want:

The trouble with basic though, is that I am constantly having to sort of “re-invent the wheel” just to add special features to my site. This definitely helped me learn a LOT, but because I ran out of time to do all of the coding, as you can see my site got neglected! :(

I went to the WordPress.org Free Themes Page and decided to go with a sort of veteran theme called: Mystique.

I really like Mystique because it has the menus with drop-downs and some really decent social media integration. (Some integration that you would have to massively dissect current widgets to reproduce. Believe me, I’ve had clients who have seen options like ones on other Mystique blogs that were only available because they were hardwired into this theme. – I had to reinvent the wheel again for those)

Why it’s bad for professional websites to go with a theme that is free and used on other websites:

As of this morning, Mystique has been downloaded more than 7,000 times! (That is from wordpress.org alone, it isn’t counting all of those that have been downloaded at Digital Nature’s Website – the author of Mystique!)

That means there are thousands of copycat websites out there that look exactly like this ->

Don’t let yours be one of them!

Now comes the fun part.

Customization

Remember this if this is the first time you’ve heard it:

Changing your WP site layout is NOT just as easy as changing your theme!

WordPress is tricky, something that sounds so easy can turn out to be untangling a web of code to find the code that you need to be moved with you when you move to a new theme! If you aren’t sure about what you are doing…

BACK UP EVERY SINGLE FILE IN YOUR ORIGINAL THEME FOLDER!!!

Do NOT attempt to change your website template unless you know how to make sure you will still have the custom code to watch your traffic, update your rss feed if you use a service like feedburner, or even just keep track of your branding items like: favicons and logos. Next week I plan to edit my layout colors and add my logo back in. :)

Fixes, Adds, and Re-Adds:

☑ My favicon

☑ Google Analytics code

☑ Nav menus: I love navigation menus… They aren’t the easiest thing to write from scratch, so that’s one of the main reasons I was pleased with Mystique for my personal blog.

☑ New (more generalized) categories: I added some better “parent categories” including: “Business, Entertainment, and Technology” I left “Life in General” as a main category for my nav menu.

There is still MUCH to do, but I am finished for tonight. See you next week!

Website Makeover: Step One

1. Get “Before” Pictures and Write a List

My website has been so neglected this year.

Between work and school, I haven’t had much time for blogging.

Now that I am finished with school, I am turning over a new leaf!

I think it’s time this website did as well. . .

The List:

  • Choose a new layout to work with.
  • Build in better navigation (like a menu bar and I am going to use breadcrumb navigation).
  • Completely redo the homepage content.
  • Import my unposted content. There are lots of articles I have written that I haven’t had a good place to post because I have been planning to redo my personal site for awhile.
  • Fix the SEO!<- There are so many fixes to this I will share with you!
  • Share tips with you to help you build better blog sites.

I created this screenshot of my full web pages, with the basic version (free) of a very easy to use Firefox Plugin called:  Pearl Crescent Page Saver.

It sure beats taking windows screen shots. Dealing with the pressing “crtl, Fn, and prt sc” and cropping and pasting gets tedious and messy!!

The Thesis WordPress Theme

Benefits and Drawbacks of Thesis

This past week, I had the “privilege” of completing a project working with the Thesis WordPress Theme. It had been a while since I had seen the back-end workings of this theme, and I was pleasantly surprised by some of the improvements. Thesis has always been a decent, robust theme for beginners to work with. Would I recommend you buy it for your website? No, I really wouldn’t.

Start Quote MeLeaving any WordPress theme in its default layout is guaranteeing that your website looks exactly like a 1000 other sites.Quote Me End
    The Drawbacks

  1. You can end up looking like everyone else if you don’t take the time to customize.
  2. It starts you out with two sidebars side by side. (Two sidebars make usability more confusing for most web surfers.)
  3. It has its own set of hooks to learn about.

Hooks

FYI for experienced web developers
Leaving any WordPress theme at its default layout is guaranteeing that your site will be the exact carbon copy of thousands of other websites out there. When it comes to learning about new features like hooks, you just have to dive right in. Hooks can be very helpful, or they can just be a royal pain.

Even if you know plenty about hooks, I recommend installing the Thesis OpenHook plugin. In Thesis, you are working with the custom-functions.php and custom.css files to do a lot of your changes. Because Thesis has an unusual (at least unusual compared to most themes I work with) of requiring you to use hooks instead of editing a header.php file or footer.php file.

The Benefits of Thesis

The idea behind it is that anyone can customize it, but it is not fully customizable like it boasts to be unless you really know what you are doing.

    Thesis is:

  1. SEO Friendly (This should be number one concern on any website owner’s list.)
  2. Semicustomizable (and hooks don’t make this much easier in Thesis, even for seasoned developers)
  3. The Featured Box (nice, but you still need to use a plug-in or write some serious PHP functions to get it to do anything cool)
  4. 4. Post Excerpts (I really like post excerpts with thumbnail sized images. : )

You are able to change fonts and background colors (background images are another story). See the screenshot:
Thesis Theme Design Options
Any real changes that you want to make to a professional website, you really have to jump through some hoops to get it done.

Popular and Not-So-Popular Examples

The most notable example site that I can think of who definitely use Thesis is: CopyBlogger. They have definitely customized Thesis with their custom navigation bar and homepage post excerpts.

The site: Simple Mom (which I love) is a less edited version of Thesis. If you are a WordPress designer and happen upon this website, you instantly know it is a Thesis Theme.

A classically generic Thesis themed site: Stephanie Woods. This site has some decent content, why do you think she would be OK with blending in?

Customize everything.

Getting Started with WordPress

This question/comment was from Dennis at insurance.webege.com:

Hi there! I wonder if you could please assist me? I’m new to the internet and have just set up my personal new web site, but I don’t know how to do the rest of the design and and all that stuff. I discovered that WordPress is good for this and you can simply get theme’s. I actually like your theme and was inquiring if you could let me know where you got your theme, or if it is a custom one? Do also maybe know of any other places to get nice themes? Thank you for the help!

Hello Dennis! I actually wrote this theme, and I also use a bunch of different plugins to add the “bells and whistles” like the navigation bar etc.

As far as using WordPress for your new site, I recommend you go to WordPress.com and sign up for a free blog hosted there. Only because you say you’re a beginner, and you should make sure you are comfortable with the dashboard and blogging platform.

Installing self-hosted WordPress sites require knowledge of web development tools like PHP, CSS, and MySQL database setup. If you are comfortable with these languages, you can purchase some great blog themes at Berries and Cream Blog Designs, I know the coders and theme builders there and their code is clean and they comment well so that it’s easier to edit a bit if you like to tweak your own layouts etc.

Good Luck! Sincerely, Amber