Common WordPress Support Questions

In order to learn more about WordPress, I started hanging out in the WordPress Codex and on the WordPress Support Forum. Over time, as I became more familiar with the inner workings of WordPress and read much of the documentation in the WordPress Codex, I started answering a few questions in the Forum. Part of giving back to the WordPress Community.

After a while, I found that many of the same questions were being asked over and over again. This is typical, and most of these are addressed in the Codex, but I thought I’d give people another opportunity to find some answers to common questions about using WordPress.

The WordPress Header

The main focal point for most websites and blogs, the header, seems to be of great importance and fascination to many users. Along with that fascination, they come up with a lot of problems with their headers in WordPress.

There is an article in the WordPress Codex that tackles just about all you could want to know about designing, styling, and figuring out your WordPress header called Designing Headers. It takes you into the two main versions of the header’s tags and structure, their styles, and the template tags used within them. It shows you examples of some of the award winning headers from recent WordPress Theme contests, and shows you how to change the header image or header art to better suit your site’s needs.

Here are a few of the most common questions people ask about their WordPress headers.

What are those strange things in my header?

Inside the WordPress header of your Theme’s template files are strange looking code that WordPress uses to generate information you provide in your Administration Panels. These are examples of template tags.

<a href="<?php echo get_settings('home'); ?>">

Inside of this link is a WordPress template tag that looks in your database for the settings for “home”, the front page of your WordPress site.

<h1><?php bloginfo('name'); ?></h1>

The template tag bloginfo() is one of the busiest template tags in WordPress. It features a wide selection of parameters to get different information from your database. In this instance, it gets the “name” of the site as you set it in the Administration Panels. The parameter “description” gets the website description, and “url” gets the URL or address of the website.

How Do I Change the Header Image?

To change the image in the header, the style references are found in the style.css style sheet file or in the head of the header.php template file. Look there for a reference to header, headerimage, or h1 and change the background image reference to the graphic image file you want to replace it.

If you are using a Kubrick/Default WordPress based Theme, a utility tool called Kubrickr changes the header image quickly and easily for you.

How Do I Center My Header Title

Each WordPress Theme positions the text within the header in a different way, often moving it around to accommodate the header art within it. To position the text to the right, left or center, find the h1 styles and add or change the text-align:right, text-align:left, or text-align:center.

Sometimes you want more control over the positioning of the title. You can use CSS positioning properties to move the text around within your header. The positions are left, right, top, bottom, and vertical-align.

To move the h1 to the upper right corner of the header, you might use:

h1 { position: absolute;
  top: 10px;
  right: 20px
  }

Experiment with the different positions to find the right placement for the text.

How Do I Add/Eliminate the Description in My Header

Many WordPress Themes include the blog or site description in the header. To remove or add the description, open the header.php template file.

To add the description to the header, below the h1 tag, add:

<div id="description"><?php bloginfo('description'); ?></div >

To remove it, find the above tag and delete it.

To style your description, add #description to your style.css style sheet and add the styles you want.

Changing Styles and CSS

Since 1999, all web pages are to be styled with style sheets called Cascading Style Sheets or CSS. Basically, the HTML page holds the structure of the page with descriptive titles to each section called “selectors”. In an attached file, called style.css in WordPress, all of the presentation instructions or style properties are set for each selector or HTML tag.

Let’s say that you want to modify your header’s text. It’s centered and you want to change it to right justified. To find your CSS styles in WordPress, you need to do the following:

• View your page in your web browser.
• From the menu choose VIEW > PAGE SOURCE. It will pop up a page with the generated HTML version of your page.
• Look through the code. It may seem overwhelming, but concentrate on finding your header section. Using the browser’s search functions, search for header.
• When you find it, it should be inside of a “container” looking something like this:
  <div id="header"><h1 ><?php bloginfo('name'); ?></h1 ></div >
• This information tells you that the title of your site is in two selectors: h1 and header.
• In a Text Editor program, open the
  

  style sheet file in your Themes subfolder (usually in wordpress/wp-content/themes/themename/. This is your CSS file that holds the presentation styles for your page’s structure.

• Scroll or search through it and look for header. Inside of that will be the first set of formatting references that form the header’s styles.
• If you do not see a reference to text-align:center, search for the next selector involved: h1
• In the h1 section, look again for text-align:center.
• If text-align is listed, change it to text-align:right to make the text be right justified.

If you cannot find references for the header or h1 styles in your style sheet, or if you change it there and it still looks centered, some WordPress Themes put this information in the head of the header.php template file. Look there for the styles.

This technique applies to any of the styles you want to change within your WordPress site. If you are new to CSS, we have some articles that may help you learn more, and you can find more information about WordPress and CSS on the WordPress Codex.

• CSS: The Things You Need To Know
• Understanding CSS Selectors and Attributes
• CSS Design Experiments
• CSS Tips and Tricks – Jazzing Up the Content
• CSS Book Recommendations

Help Me Find a WordPress Theme

There are now more than 300 WordPress Themes available to choose from. From among those, there are many variations on a theme, changing colors or number of sidebars. This number is growing rapidly as more and more people experiment with WordPress Theme designs.

With all these variations and choices, most WordPress Support Forum volunteers can’t keep track of which Themes look like what, so many times this question goes unanswered, or poorly answered.

If you are looking for a WordPress Theme, here are some tips to help you decide.

Look Past the Frosting

For the most part, there are only a few variations on layout and the rest of the look is “paint”. To learn about the core layouts that are most commonly found on the Internet, read Mezzoblue’s Web Page Layouts: Columns and Grids. Basically, you have a header, content area, sidebar, and footer. There are themes with no sidebars (1 column), one sidebar (left or right), two sidebars (one right or left, or two side-by-side on the right or the left), or three sidebars, or even the rare four column, which is more of a newspaper style. Some have a prominent header, some smaller, or none. Some have a footer, some don’t. Everything else is just frosting.

Look For The Architecture

To find the one you want, first decide the layout architecture you need and forget about graphics and color. Do you want the sidebar on the left or right? Do you want a fixed layout or flexible or elastic, stretching the full width of the screen?

All WordPress Themes are Simple

The WordPress Support Forum gets a lot of requests for a very simple Theme layout from which people can play and develop their own Theme. Reality is, most WordPress Themes are simple once you take away all the colors and pictures. In theory, most of them house the same core structure and reference selectors. Most of the modifications happen in the style.css style sheet. There are some Themes that you can completely change the look by only replacing the style.css from another Theme. Can’t get much simpler than that.

Use WordPress Codex Theme List Sorted By Column

Once you have decided upon the layout you want, you can use the WordPress Codex WordPress Theme List which is sorted by column layouts. That will narrow down your search.

Colors, Fonts, Graphics, and Styles Can All Be Changed

Remember, all the colors, graphics, fonts, and titles can be changed from within the style sheet. Ignore the pretty or garish use of colors and concentrate on what you want the site’s layout to appear. After you find a good layout, then you can go through and style it any way you want.

If you need more information on the different parts and pieces of how a WordPress Theme works, read First Steps With WordPress. It will take you through the default and classic WordPress Themes right after your installation, helping you learn what each thing is and how it works. The more you understand about how WordPress works with your site’s content, the better you can style the page to maximize those uses.

• WordPress Approved Themes
• WordPress Theme Viewer
• Blogging Pro WordPress Theme Category
• The “official” WordPress Theme List
• Alex King’s WordPress Theme Competition
• WRC: 1.5 Themes List

I Want to Design My WordPress Theme From Scratch

A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice.

• First, find a WordPress Theme architecture that you like, be it one or two sidebars, or no header, or whatever you want. Forget about the colors, graphics, and fonts. Just concentrate on the layout.
• Download a couple of Themes you like and put them through their paces on your test site. Do you like the way the single post looks different from the front page, category, and archive pages? If not, try another. If yes, then it’s time to start to work.
• Copy your chosen Theme to a new folder with a different folder name under your wp-content/themes folder. Open the style.css style sheet file in a Text Editor and rename the header section at the top to something different, like “My Test Theme” or “Ripping and Tearing”. Just give it a different name. Depending upon how much you will end up modifying the Theme, you can either leave the author credit inside or not, it’s up to you and the copyright terms of the WordPress Theme.
• Upload the new Theme Folder to your website. From within the Administration Panels, under Presentation, find the new Theme and activate it. You now have a test Theme to work with.

If you aren’t worried about bandwidth on your website or your Internet connection, you can style your site right on the Internet. If you are worried, then use one of the “Sandbox” methods below.

Get familiar with your site’s layout and structure by checking the source code and the style sheet, and begin your modifications one at a time. I recommend that you backup your test Theme folder frequently as you go, in case you make a big mess and you need to go back, but not to start over.

Determined to Start from Total Scratch

If you are determined to redesign your WordPress Theme from scratch, you probably already know how to do this. Here are some basic instructions if you need a checklist.

• Using either the Default or Classic WordPress Themes, generate a test post in your browser.
• Copy the ID and class selectors and HTML tags from the top to the bottom of the site into a Text Editor page. This is the list of the architectural features you can change, also known as your style sheet.
  • If necessary, add selectors to the sections lacking them, like each of the template tags that generate different lists within the sidebar and/or footer. These need to be added to the various modular template files within the test Theme folder.
  • Different tags may appear on different views of your test Theme. Be sure and check the pages generated by the front page, category, archives, search, single, and Page views to find more selectors and tags.
  • When you have your list finished, then save it and call it style.css, replacing the style sheet that came with the Theme.
• Start applying styles to the various structural HTML tags, ID and class selectors within the style.css.

Making WordPress Themes in a Sandbox

If bandwidth is an issue, or you want to really dig in and do a lot of the work on the style sheet before uploading it to the public eye, then consider using one of the following sandbox techniques.

The sandbox technique involves creating a test post with all of your headings and the various ways you may use a post, using blockquotes, bold, italics, and lists. View this file in your browser and then save it to your hard drive. Go into the file and change the style sheet reference to the style sheet on your hard drive that you wish to use. Now you can make changes to the style sheet and use the sample web page on your hard drive, testing and experimenting with looks, before you upload it to the site for final testing.

• Elastic Dog’s WordPress Design Sandbox Article
• Working On CSS and the WordPress Theme (using a sandbox)

WordPress Theme Design Help

Here is a list of articles and resources you may find helpful when designing your WordPress Theme, from scratch or just for tweaking.

• WordPress Lessons
• Finding Your CSS Styles
• WordPress Blog Design and Layout
• Using WordPress Themes
• WordPress CSS Information and Techniques
• Creating individual Pages
• Stepping Into Template
• Template Files
• Stepping Into Template Tags
• Template Tags
• Using WordPress Themes
• Developing WordPress Themes
• Template Tag Layout in simple to read form
• The Loop in Action
• Anatomy of a WordPress Theme
• WordPress Templates and the is functions
• Secrets of WordPress Themeing
• Secrets of WordPress Themeing Part 2

My WordPress Theme is Broken

Generally, before a WordPress Theme is released to the public it should have been thoroughly tested on different browsers and computers, and validated for errors. WordPress Themes usually break after the user gets in and messes with it.

If this isn’t the case, check to make sure that you followed the Theme author’s instructions to the letter. Consider downloading another version, making sure it is the most current version, and uploading it again. Make sure all the parts and pieces are in the right place and called the right names.

Then deselect the Theme for another one, test to make sure that one, the default or class, works on your site, and then switch to the new one and see if that works.

Run a validation of the code on your site and fix any errors found. That often fixes a lot of the problems.

If none of these work, contact the Theme author and check their website to see if anyone else is having similar problems, or if there is a new version, since many authors are updating their templates as people begin to play with them and find little ickies that need fixing.

If you are unable to get help from the Theme author or their site, and you are sure it isn’t you, search the WordPress Support Forum for help and the Internet to see if someone else has had the same problem. If not, then post your question, including your attempts to solve it, in the WordPress Support Forum Themes and Templates section.

I Broke My WordPress Theme

If you are the guilty party and your WordPress Theme is messed up because of something you did, here are some things to check and do before you coming running to the WordPress Support Forum.

• Validate your web page and fix all errors. Be sure to validate specific pages like the front page, single post, Page, archive, and category to be sure the error isn’t within those template files.
• Read through and use the testing and checking resources in the WordPress Codex article on CSS Troubleshooting.
• If you haven’t already, install FireFox Internet browser and the Web Development add-ons. Using these, try the following:
  • Using Outline > Block Level Items puts borders around the different containers on your page to help you track down the specific troublesome area.
  • Using Edit CSS, manually edit the styles for that page that appear in the sidebar, watching the changes take place live as you add or delete styles. If you solve the problem, be sure and copy or save the file so you can put the changes in your style.css file permanently.
• Search the Internet, WordPress Codex, and WordPress Support Forum as someone may have had the same problem and came up with a solution.

If all else fails and you can’t figure out how to solve this, then check with the WordPress Support Forum’s Theme and Template section and ask. Explain what you have already tried to eliminate the normal suspects.

The Sidebar is at the Bottom of the Page

As you start manipulating your WordPress Theme layout and design, often copying codes and styles from other Themes and putting them into your own, you will get structural problems. The header, content, sidebar, and footer are all within “containers”, HTML structures that contain information. Within the style.css style sheet are instructions which tell these containers where to sit on the page, how big to be, and how to look.

Think of these structural containers like dominos. When you change one, they all are affected. If you widened the content container, it will push the sidebar down because now the position of the container next to it has changed and the positioning of the sidebar hasn’t. Go into your sidebar’s styles and change them to accommodate the rest of the structural changes.

Sometimes something else in the container will push the sidebar around. Comment forms feature wide text input areas for names, email, website address, and text that need to be sized so they sit within the content area and not stretch across into the sidebar area. Make sure your comment inputs have a width set to keep it within their container area.

Long words, graphics, links, or blocks of code that don’t wrap will also push the edges of your containers around. If you have a long link featuring no spaces in your sidebar, it can push it’s edges out to overlap the content container, even possibly pushing that container down below your sidebar. Check carefully for long words or graphics that can push the width of your containers around. Either resize the graphic, or put a space in the word, or make whatever change you need to accommodate the “pushy” content.

Sorting Category Lists

Categories are displayed usually in the sidebar and many people want to change the order they are listed in.

There are two template tags that control how the category list is generated:

• wp_list_cats()
• list_cats()

Both work the same way but use different commands to get the same results. By default, you have two ways of sorting your categories: name and ID.

<?php list_cats(FALSE, ' ', 'name'); ?>

<ul>
<?php wp_list_cats('sort_column=name&sort_order=desc'); ?>
</ul>

If neither of these work for you, and you want to control the order, set the order before you start using WordPress. If you want to change it after, it involves a lot of work and digging into the database. So plan your categories ahead of time.

I Have a Picture that Overlaps the Text

If you have a container, such as an excerpt or the content on the front page, category, or archive page views with a graphic inside, it may overlap the next post below. The problem comes from the browser’s lack of ability to determine it’s height compared to the content within it. The image may push down the bottom of the container, overlapping the container below it. The fix comes by forcing the overlapping container to resize its height to accommodate the content within it, pushing the other container down.

If you are sure you want each of these to be the same height, set to accommodate the images which are all the same height, then you can look in the style sheet for that container’s selector and set the height to be a fixed height. But what about the times when that container won’t have a graphic. You’ve now just set the height for everything.

There is a fix or hack that will fix this problem, allowing the container to be whatever height it needs to be to hold the content within it. Developed by Positioniseverything.net, a website dedicated to developing bullet-proof CSS styles and troubleshooting browser bugs, the “Clearfix” hack also fixes another browser bug called the “Guillotine-Bug”.

In your style sheet add the following:

/* add a class of .clearfix to any element 
containing a float needing to be cleared */
.clearfix:after {
  content: "."; 
  clear: both; 
  visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End fix */

To use this, in the container that overlaps the others, like the excerpt container, add the following

<div class="excerpt clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h2>
<div class="entry">......

The container will apply the first style and then the second style, which will “fix” the height problem.

I Need to Search and Replace Text in My Database

There are times when you change your website name or address, or you change a particular HTML reference, or need to change a lot of data within your website. Instead of going through every single post where that information is, editing and changing it, which is fine for less then ten changes, you can make a global search and replace within your WordPress database tables.

This is not for the weak of heart, timid, or those who do not regularly backup their WordPress site.

Begin by backing up your WordPress Database. You will find step-by-step-instructions in the WordPress Codex on Backing Up Your WordPress Database.

From within PHPMyAdmin, open your database and check the names of the tables holding the information you want to change. To search and replace text within your post-content table, click on the SQL tab and enter the following with the exact item you want to search for in the third line, and what you want to replace it with in the last line.

UPDATE wp_posts SET post_content = REPLACE (
post_content,
'Item to replace here',
'Replacement text here');

Check and triple check that everything is correct, and when you are ready, click GO. It will go through your database’s wp_posts table in the post_content field looking for the item to replace, and replacing it. The results will tell you how many records were changed.

While setting up my test site, I wanted to have all pings and comments closed. When I moved the test site out to the public, these needed to be turned back on. To turn all the pings back on for every post and Page within my site, I used the following search and replace in my database.

UPDATE wp_posts SET ping_status="open";

If the ping_status was “closed”, it was now “open” and if it was blank, it was also now “open”. I then went through the Pages for my “About”, “Contact”, and other posts and Pages I didn’t want open to comments or pings and turned them off manually.