FAQ Layout and Design « WordPress Codex

September 8, 2020

Languages: English • 日本語 Português do Brasil中文(简体)中文(繁體) • (Add your language)

Back to FAQ



Many of the answers provided on this FAQ refer to outdated versions of WordPress. Use caution when following some instructions, as some specifics may have changed. In particular, be wary of instructions that direct you to edit WordPress core files. We don’t do things that way any more. The best way to alter how your website looks and works is by creating your own Child Theme that overrides only the settings you want to change and interacts only as needed with WordPress (just like a Plugin does) through action and filter hooks. Since all your customizations are contained in your Child Theme, you don’t have to worry about all your changes being overwritten during the next upgrade cycle.

Layout and Styles

I am having trouble with my CSS so where can I find help?

The following are articles that will help you troubleshoot and solve many of your CSS problems:

How can I choose different styles or colours for my comments?

There are a variety of WordPress Plugins that change the look, layout, and colors of your comments and comment form. Look for various Comments Plugins in the Official WordPress Plugin Directory.

How do I change the size of the popup comments window?

To change the look of the Popup Comments window in WordPress version 1.5, make changes to the comment-functions.php file where it shows the following line: function comments_popup_script($width=400, $height=400, $file=) {.

To change the look of the Popup Comments window in WordPress version 1.2.1 Mingus, make the following change to the template-functions-comment.php on line 50:

function comments_popup_script($width=400, $height=400, $file=’wp-comments-popup.php’)

You can also change Line 81 of wp-comments-popup.php to alter the textarea size for people entering comments.

Where can I find some other Themes and templates to use for styling my site?

Where can I find information about styling lists and nested lists?

See Styling Lists with CSS

How do I change the way menu links are listed?

See Styling Lists with CSS

How do I get rid of the bullet points next to my links?

See Styling Lists with CSS

How can I create horizontal menus?

See Creating Horizontal Menus

How can I get my categories to display in the order I want?

See wp_list_categories().

How can I get my links to open in a new window?

Opening links in a new window is considered bad form in today’s web as it has been abused. Yet, it still serves a purpose for demonstration sites that require more than one window open at a time. This method will work for those links that you enter into the body of a post.

After entering the link using the Quicktags button for “link”, add target=”_blank” to the individual*- link you want to have open in a new window when clicked. Consider adding text indicating that this link will open a new window, as required by web accessibility standards.

Page Title (Opens in new window)

Is there a tool to encode HTML entities and tags so I can display code on my site?

The article Writing Code in Your Posts will help you write programming code and code examples in your posts. The Encode tool will convert your HTML/XHTML code into a form that can be displayed on your blog without it being treated as HTML by browsers.

There are also WordPress [Plugins] and other tools available to help integrate this process into your site if you use it frequently to display code.

See also: Fun Character Entities

How do I do a dropcaps on the first letter of a post?

DropCaps is the name for the effect where the first letter of the first paragraph in an article drops below the line of text, and is displayed in a larger font-size than the other normal letters.

This can be done using BBCode quicktags. First, add this to your style sheet:

#fp:first-letter { font-size : 300%; font-weight : bold; float : left; margin-right: 3px; }

then add following code to file /wp-includes/js/quicktags.js and put them among edButtons:

edButtons[edButtons.length] = new edButton(‘ed_capdrop’ ,’CapDrop’ ,’

‘ ,’

‘ ,’c’ );

You will now see a CapDrop quicktag in your edit window.

See also: drop caps support question

Where should I look for more information on CSS?


Text and Content Display

How do I show only the titles of articles on the site homepage?

To show only the title of posts on the site homepage, using the WordPress Default theme as an example, in the wp-content/themes/default/index.php file you will find code similar to this: