WordPress Top Header Makeover

Posted on May 13, 2011 by Jim Degerstrom

Give your WordPress 3.x default theme installation a new look with a WordPress top header makeover using this 5 minute tutorial. Previously this site used the default TwentyTen theme header graphic of a country road which is 1 of 8 optional photographs you may select. The 8 standard photos are shown here smaller than actual size.

WordPress standard header pix

To change the graphic file for the header in the WordPress admin backend look under Appearance and then Header. Using one of the standard 8 pix is as simple as checking a radio button next to the one you want and pressing the Save Changes button. The new look will be published and appear instantly.

Perhaps you want to have a unique custom look using a photo that you have taken, or a custom graphic with a company logo, or maybe just your logo on a plain background. That way you avoid having a look similar to 10, 100, or 1000 other sites. This site was changed in May 2011 to a country road with a red sports car consistent with our “WordPress road test” theme.

To use a custom image it’s best to crop or resize your graphic to exactly 940 x 198 pixels so it will display as-is without any stretching or distortion. You may use the tutorial to edit a photo in IrfanView to learn how to precisely crop a photograph to the proper dimensions.

Once you’ve created the custom top header graphic, return to Appearance then Header in the WordPress admin backend and use the upload button to install your custom image. Again, select the Save Changes and instantly have a new top header just like we did on this website using this WordPress edit tutorial.

Final tip: Take the time to learn basics of css cascading style sheet code and you may further customize presentation of your blog text and page layout for a truly unique look. Want a new look but can’t wait and don’t want to learn code? Search for free or premium themes if you don’t mind being similar to other websites, or contact us for a quote on a fully custom theme designed just for you.

Posted in blog, cms, demo, tutorials, wordpress | Tagged , , , , | Leave a comment

Flexible WordPress Custom Menus

Posted on April 30, 2011 by Jim Degerstrom

menu graphic illustration The WordPress Road Test site experiments in exploring the features of WordPress as a blogging platform and a cms content management system. WordPress 3.x allows having a website that looks like a static site without looking bloggy.

Less than obvious web design techniques are enhancements in the new 3.x version like flexible WordPress custom menus. If your theme was designed to support advanced features of the core WordPress design, you may be able to use drag and drop to layout or rearrange menus including the main navigation.

Look in admin under appearance for menus and then follow the instructions for assigning a custom menu setup. This allows you to control links to main site pages including the text displayed, title attributes, and the order of display.

Compare the drag and drop feature to static sites. Rather than requiring a knowledge of html code, you may drag menu items to rearrange the order of appearance. This is especially important for WordPress sites used as a cms because it allows you to easily add pages and reorder the appearance by inserting the new link anywhere in the sequence.

The new custom menu order displays instantly on your WordPress website. Again, view help files or email us if any questions on using this advanced feature.

Posted in blog, cms, demo, news, wordpress | Tagged , , , | Leave a comment

Looking Beyond WordPress v3.1

Posted on February 24, 2011 by Jim Degerstrom

model with left eye magnified The latest production release of WordPress earlier this week includes the list of enhancements mentioned in our previous post about WordPress v3.1 BETA testers. A special thanks goes out to those WordPress users who take the time to test preproduction versions and debug software issues!

View the quote below for evidence the development team is already looking beyond WordPress v3.1 to v3.2.

Often new WordPress releases involve some type of security patch or update, yet the majority of the WordPress v3.1 revisions are functional improvements to the core files.

Consider the following quote from the WordPress v3.1 release announcement:

Now is the time to drop by our development channels if you are interested in being involved with 3.2, as the agenda will be under discussion shortly. We’re hoping to get the 3.2 release out in a shorter development cycle (3.1 took too long) and include some fun improvements around plugins and the speed of the admin.

Of all the improvements since the introduction of the first v3.x release I believe the custom sidebar function for pages was a giant leap forward for using WordPress as a true cms content management system without the “bloggy” look.

For now, this WordPress blog and cms testing site uses the default sidebars. A demo and tutorial for creating custom sidebars is coming soon for readers interested in do-it-yourself web design.

Follow the above link to the v3.1 announcement and then scroll down to view a list of nearly 200 developers and testers around the world that help keep WordPress evolving as a top custom cms web design solution.

Posted in blog, cms, news, wordpress | Tagged , , , | Leave a comment

Adding StatCounter Stats Tracking

Posted on February 21, 2011 by Jim Degerstrom

Websites built on a WordPress platform may be modified by the owner including the actual templates for things like adding StatCounter stats tracking. Use caution because if unfamiliar with html or php code you could ruin the look of your website with a single punctuation error.

stats tracking code graphic

The illustration above for this tutorial displays a portion of the backend admin section of the WordPress Road Test website. Use the graphic to locate the Editor under Appearance in your admin navigation to see where to insert code for tracking statistics

Steps to Add StatCounter Stats Tracking

  1. Visit www.StatCounter.com to sign up for a free account.
  2. Follow the steps to get their unique code for your website.
  3. Copy and paste the code into your NotePad word processor.
  4. Log in to your WordPress website backend admin.
  5. In the left navigation select Appearance and then Editor.
  6. Find file footer.php in the file list at the far right side.
  7. View the code that opens up and slide down to the bottom.
  8. Paste your StatCounter code ABOVE the </body> tag.
  9. Select the Update File button at the bottom of the page.

Now after people go to your site you may now visit the StatCounter website to view visitor behavior including pages visited, length of stay, and key words or search phrases used to find you.

Note: You may want to listen to my podcast on Tracking Website Statistics (16:17 min/sec) tutorial to quickly complete steps 1 and 2 above. That audio lesson includes a 9 page illustrated pdf tutorial of the podcast episode to make getting started really easy.

Of all the options available to analyze your statistics once done adding StatCounter stats tracking, I always look at the Visitor Path to view landing pages and how the person explored my site. That’s all it takes to add tracking and analyze ways to improve your content based on visitor behavior.

Posted in audio, blog, demo, tutorials, wordpress | Tagged , , , | 1 Comment

WordPress Contact Form Test Success

Posted on February 10, 2011 by Jim Degerstrom

hands typing on laptop pc The next custom web design option being added to the WPRoadTest.com website and tested is a standard contact form. I chose the Fast Secure Contact Form 5-star rated plugin by the same author who created SI CAPTCHA which is used to eliminate spam comments on blog posts.

Installation and setup took about 10 minutes for this basic website contact form using the default fields for the visitor’s name – first and last, email, subject, and a message. The message section is a large text area box. The number of optional settings was impressive, too.

Summary: The WordPress contact form test was a success! The test email arrived instantly in my email inbox and besides the completed fields had additional visitor data including IP, date/time, referer, and their browser.

In addition to default fields used on our test form, site owners have web design options for creating up to 4 different forms for your website and there are 8 optional custom fields you can select and set up on each form.

Upon submit the visitor instantly receives a confirmation stating “Your message has been sent, thank you.” In the past my web design method for creating a custom xhtml form in NotePad took hours to write, debug, and tweak. In addition, the contact form has similar spam protection as the SI CAPTCHA plugin, so submitting a message requires solving a CAPTCHA image.

Finally, the contact form created with the Fast Secure Contact Form plugin took minutes and meets xhtml code standards to W3c, the worldwide authority for site code. Fast, easy, and high quality custom cms web design meant the difference in our WordPress contact form test success.

Posted in cms, demo, news, testing, wordpress | Tagged , , , , | 2 Comments

Example of WordPress CMS Dropdown Menu

Posted on January 5, 2011 by Jim Degerstrom

dropdown menu example graphic The next demo of how to use WordPress as a CMS Content Management System is an example of a CMS dropdown menu. For now a new button appears in the top navigation for: Services. Mouse over the tab to see additional options under that category.

The idea behind the dropdown is enhanced usability allowing your navigation to be organized for ease of use. Make it easier for visitors to find content and they are more likely to stay longer.

A key advantage in using WordPress as a cms is the menu can be generated automatically as you create and publish pages. This requires an advanced template design to properly style links in a given theme. By planning ahead you can have a logical flow for website visitors to follow to find content of interest quicky.

Note that the top menu entitled “Services” has submenus for web design and graphic design. For demo purposes the graphic design link has sub-submenu items for logo design and business card artwork. Think of your site navigation like a tree structure of a main trunk (home page) with major tree limbs (top menu items) and then branches (submenu items) and even branch ends or twigs (sub sub-menu items) to consider how you can logically layout navigation.

Finally, note on each of the main site pages there is no comment box or CAPTCHA to solve. The blog posts are designed for commenting – not the main site. This new custom cms web design look gives the appearance of a cms with an integrated blog. Site owners can expand their website and blog to 100′s or even 1000′s of pages!

Stay tuned as we explore more features that allow using WordPress as a blog, cms, or both.

Posted in blog, cms, demo, testing, tutorials, wordpress | Tagged , , , , , , | Leave a comment

WordPress CMS and Blog Integration

Posted on December 30, 2010 by Jim Degerstrom

reading panel example graphic The next phase is done using WordPress as a blog and a content management system with static pages by performing WordPress cms and blog integration.

The previous home page was the first page of just the blog displaying the latest (up to 10) blog posts. That view has been replaced with a static intro page.

The entire process of the custom cms web design and matching blog integration takes place in the backend admin section of your WordPress installation. There you can create pages as well as posts which is the key to making WordPress appear as a cms content management system.

Go to the admin new page option to create a page of content for the “home” page and publish it. Next, create another new “page” and use blog for the title with NO content and publish that. In admin and under settings select the Reading option as shown in the graphic here. Choose the option for “static home page” and set that to your new “home” page that you just created. The blank “blog” page you published with zero content will be the placeholder for your blog posts.

Go to your website domain and the new default home static page appears. In addition, the links now include a new button or hyperlink for “Blog”. Voila! The system recognizes your static page as the home page and added a link to the posts as the blog. Future lessons will include how we add more static pages like “About Us” and other content with top menu items that have dropdown menus to expand your “static” custom cms web design content.

Posted in blog, cms, demo, news, testing, tutorials, wordpress | Tagged , , , , , , | Leave a comment

WordPress 3.1 Beta 1 Testers

Posted on November 29, 2010 by Jim Degerstrom

WordPress v3.1 coming soon graphic Techie types are being asked to volunteer to test and debug a newly anticipated version of WordPress that is available to test now, and the production version may be released as early as next month.

See the official announcement and download WordPress 3.1 Beta 1 and help out by testing and reporting bugs. For programmers, you are invited to view known bugs to help code the solution.

Note: Because this is a beta version of the WordPress files you should NOT use this on a current or new production blog or website to avoid problems likely to be encountered while the files are being tested, debugged, and fixed.

New features in WordPress 3.1 listed and linked in the announcment:

  • Admin Bar
  • Admin CSS Cleanup
  • Ajaxified Admin
  • Custom Post Type Index Pages
  • Internal Linking
  • Multi-taxonomy Queries
  • Network Admin
  • Password Reset Redux
  • Post Formats
  • Theme Search
  • Updated Tiny MCE
  • User Admin

Follow the link above to the WordPress v3.1 Beta 1 announcement and then visit links to each of the new features for more details about each one.

The purpose of this WordPress Road Test website is for WordPress blog and cms testing to the latest production versions in the v3.x generation (currently 3.0.1). Therefore, we will not be beta testers and will wait to upgrade to v3.1 when released.

Posted in blog, news, testing, wordpress | Tagged , , | Leave a comment

WordPress Podcast Audio Player Tutorial

Posted on October 30, 2010 by Jim Degerstrom

Download this Audio Tutorial or select the Play Button to listen NOW (05:12 min/sec):

microphone in hand graphic In our journey taking the WordPress Road Test we continue learning web design techniques including how to add advanced features while using WordPress as a cms content management system or blog. Next up is a podcast audio player tutorial to show site owners how to easily create and publish audio content to their blog.

Select the play button ABOVE to read along or pause as you listen to the audio version of this tutorial. Special Note: This tutorial solves the audio player display problem in WordPress 3.x that may happen when upgrading from v2.x and leaving a blank space instead of the audio player. The secret? We manually install the player being recommended here and use copy/paste to insert the player into posts.

While a simple narration with voice only is fine, you may want to add a professional touch with background music or perhaps a theme song for your intro and outro. Our choice is MusicBakery.com for royalty free music for a wide selection of tracks by the album or individual tune. Pay once and include the music in your audio or video projects without recurring license fees.

First up you need a script and then some method to record your narration. All computers have some type of recorder so with a simple microphone you can begin creating audio tracks for your WordPress cms website or blog immediately. For better control of your recording and edits, plus the ability to mix multiple tracks including a background music track, download free Audacity audio software for more professional results.

Listen to this tutorial of the sample player and audio file if not already listening along now. The audio includes the narration plus a background music track inserted during the intro and outro.

This part of the tutorial explains how this soundtrack was produced. The audio track in mp3 was created by recording the voice in Audacity and then using advanced features to remove uhms and ahhs and edit pauses of silence longer or shorter to control the tempo.

Next, the sound track was added in Audacity using drag and drop. Portions were inserted at the beginning and end and then clipped to 3-5 seconds with fade-in and fade-out special effects. Listen and tweak as necessary or continue by exporting the mix as mp3 and uploading the audio track to a /audio folder on your server. Create the folder if it does not exist.

Finally, to create the audio player go to the plugin download page on WordPress and download. Do NOT use the backend admin search and install function. Manually install the plugin to avoid compatibility issues in v3.x of WordPress. After unzipping the plugin do NOT upload it to your server. Instead, look in the folder /assets on your pc and upload these files to your root server: player.swf and audio-player.js.

Return to the admin backend and under appearance select EDIT, and then on the right select header.php. Add the following line of code somewhere between <head> </head> and replacing yourdomain.com with your actual domain:

<script type="text/javascript" src="http://www.yourdomain/audio-player.js"></script>

As stated earlier, instead of installing this as a plugin, this manual method works. As of Oct 2010 the plugin displays a blank space instead of the player in WordPress v3.x unless you use this manual install. To get the proper code to insert in your post do right-click view source to use ours for reference. Look for everything between the <object> </object> tags and replace the mp3 file name and path with yours.

When done with the edit select the HTML view tab (not Visual) and copy/paste the code where you want the player to appear. That’s it. Have fun adding audio to your website design.

Posted in audio, blog, cms, demo, testing, tutorials, wordpress | Tagged , , , , , , | 2 Comments

WordPress Backup and Upgrade Security

Posted on September 27, 2010 by Jim Degerstrom

combination safe security graphic The importance of WordPress backup and upgrade security cannot be emphasized enough for new site owners, or anyone tempted to ignore the dangers of losing data.

The database for your WordPress blog can be easily saved on a daily or weekly basis depending on how often you add content. Imagine a hard drive crash without data backup on your computer. Losing your blog data may be even more complicated or impossible to retrieve.

My choice for doing the database backup is the WP-DB-Backup plugin which allows you to schedule the frequency and have the file emailed to you. This is what I recommend for ease of use, plus storage on your computer is more secure than leaving it on the server.

The other WordPress blog maintenance activity for protecting your site is doing an upgrade each time a new version is released. At the time of this post, v3.x has been upgraded since the production release and the automatic upgrade function from the admin backend was fast and flawless.

Most often the WordPress upgrades are released to plug potential security risks. From the default first page when you log on to the admin section, there’s a message stating either you are using the latest version or a nag message suggesting you upgrade. Options are download and install manually or install automatically from admin with one click. Automatic installation on my blogs takes about 60 seconds.

I’m shocked by the number of WordPress blogs that go several versions or years behind the current release without an upgrade. Getting hacked or losing your database can be avoided by maintaining WordPress backup and upgrade security. Why not check yours today? Better yet, my advice is checking it now.

Posted in blog, demo, news, wordpress | Tagged , , , | Leave a comment