How to Make a Wordpress Website (Video)


WordPress Semantics


As with many software packages, WordPress has its own lingo or jargon. This article will introduce you to some of the terminology used in WordPress.

Introduction to WordPress Terminology

WordPress was created by the developers as weblogging or blogging software. A blog, as defined in the Codex Glossary, is an online journal, diary, or serial, published by a person or group of people. Many blogs are personal in nature, reflecting the opinions and interests of the owner. But, blogs are now important tools in the world of news, business, politics, and entertainment.

Blogs are a form of a Content Management System (CMS) which Wikipedia calls “a system used to organize and facilitate collaborative content creation.” Both blogs and Content Management Systems can perform the role of a website (site for short). A website can be thought of as a collection of articles and information about a specific subject, service, or product, which may not be a personal reflection of the owner. More recently, as the role of WordPress has expanded, WordPress developers have begun using the more general term site, in place of blog.

Terminology Related to Content

The term Word in WordPress refers to the words used to compose posts. Posts are the principal element (or content) of a blog. The posts are the writings, compositions, discussions, discourses, musings, and, yes, the rantings of the blog’s owner and guest authors. Posts, in most cases, are the reason a blog exists; without posts, there is no blog!

To facilitate the post writing process, WordPress provides a full featured authoring tool with modules that can be moved, via drag-and-drop, to fit the needs of all authors. The Dashboard QuickPress module makes it easy to quickly write and publish a post. There’s no excuse for not writing.

Integral to a blog are the pictures, images, sounds, and movies, otherwise know as media. Media enhances, and gives life to a blog’s content. WordPress provides an easy to use method of inserting Media directly into posts, and a method to upload Media that can be later attached to posts, and a Media Manager to manage those various Media.

An important part of the posting process is the act of assigning those posts to categories. Each post in WordPress is filed under one or more categories. Categories can be hierarchical in nature, where one category acts as a parent to several child, or grandchild, categories. Thoughtful categorization allows posts of similar content to be grouped, thereby aiding viewers in the navigation, and use of a site. In addition to categories, terms or keywords called tags can be assigned to each post. Tags act as another navigation tool, but are not hierarchical in nature. Both categories and tags are part of a system called taxonomies. If categories and tags are not enough, users can also create custom taxonomies that allow more specific identification of posts or pages or custom post types.

In turn, post categories and tags are two of the elements of what’s called post meta data. Post meta data refers to the information associated with each post and includes the author’s name and the date posted as well as the post categories. Post meta data also refers to Custom Fields where you assign specific words, or keys, that can describe posts. But, you can’t mention post meta data without discussing the term meta.

Generally, meta means “information about”; in WordPress, meta usually refers to administrative-type information. So, besides post meta data, Meta is the HTML tag used to describe and define a web page to the outside world, like meta tag keywords for search engines. Also, many WordPress-based sites offer a Meta section, usually found in the sidebar, with links to login or register at that site. And, don’t forget Meta Rules: The rules defining the general protocol to follow in using this Codex, or Meta, as in the MediaWiki namespace that refers to administrative functions within Codex. That’s a lot of Meta!

After a post is made public, a blog’s readers will respond, via comments, to that post, and in turn, authors will reply. Comments enable the communication process, that give-and-take, between author and reader. Comments are the life-blood of most blogs.

Finally, WordPress also offers two other content management tools called Pages and custom post types. Pages often present static information, such as “About Me”, or “Contact Us”, Pages. Typically “timeless” in nature, Pages should not be confused with the time-oriented objects called posts. Interestingly, a Page is allowed to be commented upon, but a Page cannot be categorized. A custom post type refers to a type of structured data that is different from a post or a page. Custom post types allow users to easily create and manage such things as portfolios, projects, video libraries, podcasts, quotes, chats, and whatever a user or developer can imagine.

Terminology Related to Design

A WordPress Theme is the overall design of a site and encompasses color, graphics, and text. A Theme is sometimes called the skin or template, but it isn’t really. A skin and template are really website paint jobs. A WordPress Theme is where code meets design, allowing a site to change based upon specific conditions set by the site administrator.

Installation of WordPress Themes is made easy with the Themes Menu on the Administration Panels. Simply search for a new Theme from within the official WordPress Theme Directory and activate it with a few clicks. You can also preview your site before installing and activating the Theme to see what your site will look like with that WordPress Theme.

The flexibility of WordPress is apparent when discussing terminology related to the design of a WordPress site. At the core of WordPress, developers created a programming structure named The Loop to handle the processing of posts. The Loop is the critical PHP program code used to display posts. Anyone wanting to enhance and customize WordPress will need to understand the mechanics of The Loop.

Along with The Loop, WordPress developers have created Template Tags which are a group of PHP functions that can be invoked by designers to perform an action or display specific information. It is the Template Tags that form the basis of the Template Files. Templates (files) contain the programming pieces, such as Template Tags, that control the structure and flow of a WordPress site. These files draw information from your WordPress MySQL database and generate the HTML code which is sent to the web browser. A Template Hierarchy, in essence the order of processing, dictates how Templates control almost all aspects of the output, including Headers, Sidebars, and Archives. Archives are a dynamically generated list of posts, and are typically grouped by date, category, tag, or author.

As the capabilities of WordPress have improved, developers have added tools that allow users to easily manage a site’s look and functionality:

  • Widgets provide an easy way to add little programs, such as the current weather, to a sidebar.
  • Menus make it easy to define the navigation buttons that are typically present near the top of a site’s pages.
  • The Background tool allows the user to change the background image and color of a site.
  • The Header tool gives the user control of the images displayed at the top of a site’s various pages.
  • Post Formats allow the user to control the display of a specific post (i.e. display this post as an Aside or as a quote or as a gallery).

Developers and users are encouraged to explore the latest default WordPress Themes named by the year in which they are released. Twenty-Eleven WordPress Theme, rightly called a showcase Theme, introduced many of the above features. It emphasized the use of the Child Theme concept to shield a theme from getting overwritten during a WordPress update. The Twenty-Thirteen Theme was designed to take advantage of Formats. The Twenty-Fourteen WordPress Theme is a magazine-style Theme. It includes a customizable, grid front-page template, custom author Page template, and the use of tags to feature content on the front page of the site rather than sticky posts or categories, further stretching the boundaries of the possible with WordPress Themes.

Plugins are custom functions created to extend the core functionality of WordPress. The WordPress developers have maximized flexibility and minimized code bloat by allowing outside developers the opportunity to create their own useful add-on features. As evidenced by the WordPress Plugin Directory, there’s a Plugin to enhance virtually every aspect of WordPress.

A Plugin management tool makes it extremely easy to find and install Plugins directly from the official directory.

Terminology for the Administrator

Another set of terms to examine are those involving the Administration of a WordPress site. A comprehensive set of Administration Panels enables users to easily administer and monitor their blog. A WordPress administrator has a number of powers which include requiring a visitor to register in order to participate in the blog, who can create new posts, whether comments can be left, and if files can be uploaded to the blog. An Administrator also defines Links and the associated Link Categories which are an important part of a blog’s connection to the outside world.

Some of the main administrative responsibilities of a WordPress blog involve adding, deleting, and managing Registered Users. Administering users means controlling Roles and Capabilities, or permissions. Roles control what functions a registered user can perform as those functions can range from just being able to login at a blog to performing the role administrator.

Another chief concern for the blog administrator is Comment Moderation. Comments, also called discussions, are responses to posts left for the post author by the visitor and represent an important part of “the give and take” of a blog. But Comments must be patrolled for Spam and other malicious intentions. The WordPress Administration Comments SubPanel simplifies that process with easy-to-use screens which add, change, and delete Comments.

And not to be forgotten is the obligation for an administrator to keep their WordPress current to insure that the latest features, bugs, and security fixes are in effect. To accommodate administrators, WordPress has a simple Upgrade Tool to download and install the latest version of WordPress. There’s no excuse to not upgrade!

The Terminology of Help

The final set of jargon relates to helping you with WordPress. First and foremost is the hanging Help tab that is displayed under each of the Administration SubPanels. That contextual help describes the function and use of the current SubPanel and provides links to other help topics. And, there are other help resources available to WordPress users; Getting More Help, Finding WordPress Help, Troubleshooting, and WordPress FAQ (frequently asked questions) are good starting points. Also Getting Started with WordPress will jump-start readers into the world of WordPress and the excellent WordPress Lessons provide in-depth tutorials on many of the aspects of using WordPress. Among the most important resources is the WordPress Support Forum where knowledgeable volunteers answer your questions and help solve any problems related to WordPress. And, of course, this Codex which is filled with hundreds of articles designed to make your WordPress experience a success!

History of the WordPress Name

Besides the technical terminology of WordPress, it is also interesting to know the history of the name, WordPress. The name “WordPress” was originally coined by Christine Tremoulet (see related post) in response to developer Matthew Mullenweg’s desire to associate his new software project with printing presses. In this sense, press refers to the world of reporters, journalists, columnists, and photographers. An aptly chosen name, because WordPress serves as the printing press that enables its users to publish their words.

More Information and Resources

External Links

Uploading Files

About Uploading Files with WordPress

To upload files, you can use WordPress’s online interface, the Dashboard or one of the recommended editors and upload your files via FTP.

This article tells you how to upload files using the Dashboard. To upload files via FTP, read Uploading WordPress to a Remote Host.

About Uploading Files on Dashboard

After you log in to WordPress and click on the Dashboard menu at the top of the screen, you can upload files with the Flash uploader.

Dashboard lets you upload files in the following ways:

  • Immediately in a post.
  • Immediately in a page.
  • For later use in your Media Library.

WordPress supports uploading the following file types:


  • .jpg
  • .jpeg
  • .png
  • .gif
  • .ico


  • .pdf (Portable Document Format; Adobe Acrobat)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)
  • .psd (Adobe Photoshop Document)


  • .mp3
  • .m4a
  • .ogg
  • .wav


  • .mp4, .m4v (MPEG-4)
  • .mov (QuickTime)
  • .wmv (Windows Media Video)
  • .avi
  • .mpg
  • .ogv (Ogg)
  • .3gp (3GPP)
  • .3g2 (3GPP2)

Not all webhosts permit these files to be uploaded. Also, they may not permit large file uploads. If you are having issues, please check with your host first.

To Upload a File in a Post

  1. On the Dashboard menu, click Posts, and then click Add New to display the “Add New Post” page.
  2. On the Upload/Insert menu, click the icon for the type of file you want to upload and the “Add media files from your computer” page will appear.
  3. Click the Select Files button.
  4. In the dialog box, select the file you want to upload.
    To select multiple files, hold down the SHIFT key (for PC users) or the COMMAND key (for Macintosh users).
  5. Click Open.
  6. When your file uploads, a field appears. At the bottom of the field, click the Insert into Post button.

Note: If you are having problems uploading files with the default Flash uploader, you may want to use the Browser uploader instead.

To Upload a File in a Page

  1. On the Dashboard menu, click Pages, and then click Add New to display “Add New Page.”
  2. On the Upload/Insert menu, select the icon for the type of file you want to upload and the “Add media files from your computer” page will appear.
  3. Click the Select Files button to open a dialog box.
  4. In the dialog box, select the file you want to upload.
    To select multiple files, hold down the SHIFT key (for PC users) or the COMMAND key (for Macintosh users).
  5. Click the Open button.
  6. When the upload is complete, a field with your file appears. At the bottom of the field, click the Insert into Post button.

To Upload a File for Later Use

  1. On the Dashboard menu, click Media and then click Add New to display the “Upload New Media” page.
  2. Click the Select Files button to open a dialog box.
  3. In the dialog box, select the file you want to upload.
    To select multiple files, hold down the SHIFT key (for PC users) or the COMMAND key (for Macintosh users).
  4. Click the Open button.
  5. When the upload is complete, a field with your file details appears. Below the field, click Save all changes.

Note: If the file does not open, then the file type is not supported, the chosen format may not match the file’s true format or the file may be damaged.

To Upload a File with the Browser Uploader

  1. To upload a file for later use: on the Dashboard menu, click Media, and then click Add New to display the “Upload New Media” page.
    To upload a file in a page: on the Dashboard menu, click Pages, click Add New to display “Add New Page,” and then, on the Upload/Insert menu, click the icon that represents the type of file you want to upload.
    To upload a file in a post: on the Dashboard menu, click Posts, click Add New to view the “Add New Post” page, and then, on the Upload/Insert menu, click the icon that represents the type of file you want to upload.
  2. Below the Select Files button, click the link to “Browser uploader.”


  1. When the Browser uploader appears, click the Choose File button to display a dialog box.
  2. In the dialog box, select the file you want to upload.
    To select multiple files, hold down the SHIFT key (for PC users) or the COMMAND key (for Macintosh users).
  3. Click the Upload button.

Using Password Protection

Post Visibility Settings

Once you publish a WordPress post (or Page), it is visible to the public (by default). In WordPress terms, this means a post with a Published status has a default visibility of Public, based on the settings in the Publish box of a Edit Post Screen.

WordPress also offers two less public options for your post’s Content Visibility. Clicking the “Edit” link next to Visibility: Public reveals three radio buttons:

  • Public is selected by default.
  • Checking Password protected reveals a text field for entering a password, that will be required to view that post. The password is limited to 20 characters.
  • Checking Private makes your post visible only to your site’s Users with the role of Administrator or Editor.

    Visibility Settings

When you’re done editing the post’s visibility, click the “OK” button. You should now see your post’s new setting, e.g., Visibility: Password Protected. Remember: a setting change does not take effect until you click the “Publish” button (or “Update” if the post is already published.)

Finding or Changing a Password

Only an Administrator, Editor, or the post’s Author can change a post’s password or visibility setting. To do so, use the “Visibility: Edit” link again. These settings are also available using the post’s Quick Edit link in the All Posts Screen.

The Visibility “Edit” link (or “Quick Edit”) is also a good way to reveal a forgotten post password.

Password Protected Posts

Visibility: Protected

WordPress displays a password-protected post differently. It makes these changes to the post’s:

  • Title– Adds the text “Protected: ” before the post Title.
  • Excerpt– Instead of the post Excerpt, prints this text: “There is no excerpt because this is a protected post.”
  • Content– Instead of the post Content, prints a password form with this text: “This post is password protected. To view it please enter your password below:”

So, a password-protected post with a title of “My Post” would display like this: Password-protected Content

Password Protecting Many Posts and Pages

WordPress stores this password in a browser cookie so readers don’t have to re-enter passwords if they visit the same page multiple times. Furthermore, if multiple posts use the same password, the reader will only have to enter the password once to access every post (see caveat below).

WordPress will only track one password at a time. Therefore, if two posts use two different passwords, entering the password for post A, then entering the password for post B means that revisiting post A (or any post which shares its password) will require the user to re-enter the password for post A.

Protect Custom Fields

WordPress does not print a password-protected post’s Content or Excerpt until the correct password is entered. But a post’s Custom Field(s) data is not protected, and can still show. To stop CFs from printing, wrap your get_post_meta calls (e.g., in single.php or page.php) with a conditional statement using: post_password_required. This one WordPress function checks both whether your post requires a password and whether the correct password has been provided:

if ( ! post_password_required() ) {
    // Code to fetch and print CFs, such as:
    $key_1_value_1 = get_post_meta( $post->ID, 'key_1', true );
        echo $key_1_value_1;

The post_password_required function within in an if statement is also handy for other customizations, such as preventing password-protected posts from displaying in a list.

Customize the Protected Text

With WordPress Filters you can: change the default text in the password form, change the default text for the password-protected post Excerpt, and insert the password form into the post Excerpt. To do so, add the following code to your custom plugin file.

Password Form Text

The password form displays this default message: “This post is password protected. To view it please enter your password below:” The following code will return the form with different text and different html structure — in this example the custom message is: “To view this protected post, enter the password below:”

function my_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
    $o = '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" method="post">
    ' . __( "To view this protected post, enter the password below:" ) . '
    <label for="' . $label . '">' . __( "Password:" ) . ' </label><input name="post_password" id="' . $label . '" type="password" size="20" maxlength="20" /><input type="submit" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
    return $o;
add_filter( 'the_password_form', 'my_password_form' );

Please note: the my_password_form function must return a value: don’t use print or echo.

Password Size Limitation

Make sure to set the maxlength parameter to a value of 20 when replacing the password protection form as WordPress will only save the first 20 characters due to database constraints.

Protected Excerpt Text

The default Excerpt of a password-protected post is: “There is no excerpt because this is a protected post.” This code will replace that text with your own — HTML allowed:

function my_excerpt_protected( $excerpt ) {
    if ( post_password_required() )
        $excerpt = '<em>[This is password-protected.]</em>';
    return $excerpt;
add_filter( 'the_excerpt', 'my_excerpt_protected' );

Replace “<em>[This is password-protected.]</em>” with your custom password-protected Excerpt message.

Add the Password Form to the Excerpt

Another option for your protected Excerpts is to print out the password form instead of the Excerpt message. That way people enter the password right from an index or archive page. Then, when they click the Title link, they’ll see the Content. With the get_the_password_form function, you can make the password form be the Excerpt for a password-protected post:

function my_excerpt_password_form( $excerpt ) {
    if ( post_password_required() )
        $excerpt = get_the_password_form();
    return $excerpt;
add_filter( 'the_excerpt', 'my_excerpt_password_form' );

This will get the default WordPress password form and text or any customizations you’ve made. For a better understanding of how post_password_required() and get_the_password_form() work, read their function definitions in wp-includes/post-template.php.

In this same WordPress core file you’ll also find the the_excerpt and the_password_form filters, and the functions get_the_excerpt(), get_the_title(), and get_the_content(). These functions control how a post’s title, excerpt and content display, depending on its visibility setting.

Hiding Password Protected Posts

Sometimes, you don’t want your password protected posts to show up on other places around your site, like on the home page or archive pages. To effectively hide them from these pages without affecting your pagination, place the following code in your custom plugin file:


// Filter to hide protected posts
function exclude_protected($where) {
    global $wpdb;
    return $where .= " AND {$wpdb->posts}.post_password = '' ";

// Decide where to display them
function exclude_protected_action($query) {
    if( !is_single() && !is_page() && !is_admin() ) {
        add_filter( 'posts_where', 'exclude_protected' );

// Action to queue the filter at the right time
add_action('pre_get_posts', 'exclude_protected_action');


This code works in two parts: the first part effectively removes any password protected posts directly from any SQL query that WordPress is running, using the posts_where filter. The second part adds this filter to all pages except single posts, pages, and admin pages.

For more information on why pre_get_posts is the right action for this function, see the pre_get_posts action reference.

Writing Code in Your Posts

Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP or JavaScript, putting code in your post that actually looks like code, but doesn’t behave like code, is a frequent challenge for bloggers.

By default, the way a piece of code written or pasted to WordPress post editor is interpreted depends on whether you use visual or HTML post editor. Visual editor will consider the code to be an ordinary text, converting (encoding) the < and > characters into their &lt; and &gt; character entity equivalents, so that the code is not interpreted by a web browser. Quotes are converted too, but remember that by default, WordPress also applies auto-correction so that the text is quoted properly according to your language specifics. HTML editor does not convert any of these characters, so be aware that HTML and CSS markup you use in your code examples will be recognized by a web browser and you may end up with a funky looking text and a messed up layout.
Note that this behavior may differ with respect to the WordPress version, post editor and other plugins used. In some older versions of WordPress, unrecognized uses of the < and > characters were converted into the &lt; and &gt; character entities, and when an HTML tag was found within the post, the tag was left as it was, allowing for its interpretation in a web browser.
In general, there are two uses of code within a web page. There is code found within a paragraph to make a point about the code that is being discussed, and then there is code that is highlighted…

…in such a way as to look 
like a block of code.

Code Within Paragraphs

There are two HTML tags which will turn text into a monospaced font. They are <code> and <tt>. The latter is rarely used today, replaced by the more useful and semantically correct <code>, which distinguishes text that is computer code from natural language.

This is an example which mentions code within a paragraph,
namely the functions <code>wp_title()</code>, 
<code>wp_content()</code> and <code>wp_footer()</code>, 
which are very useful in WordPress.

This is great for making a piece of non-HTML text look like code, but what about HTML tags that you want to showcase?

In the header.php template file, 
look for the <code><div class="header"></code> 
section to change the <code><h1></code> heading.

Using the <code> tag doesn’t tell WordPress to encode HTML markup within the tag or strip it from the post. WordPress thinks that you are using this markup for formatting, leaving it untouched. A web browser then sees a <code> tag followed by a <div> tag and so it responds by creating a new container in your web page. Similarly afterwards, it sees the start of an <h1> tag which will screw up your entire web page layout and design, like this:

In the header.php template file, look for the


section to change the heading.

To avoid this behavior, use character entities or extended characters to represent the left and right arrow characters in a way that is not recognized as the beginning and end of an HTML tag by a web browser, like this:

In the header.php template file, 
look for the <code>&lt;div class="header"&gt;</code> 
section to change the <code>&lt;h1&gt;</code> heading.

URLs Within Paragraphs

By default, WordPress will turn any phrase that begins with http: into a link. If you are giving an example of how to link to a specific post within a WordPress site, instead of using the link with and having it turn into a link, you can use extended characters for the slashes, so WordPress won’t “see” the link. to a specific WordPress post using 
in your post....

List of Related Character Entities

Here is a list of some HTML character entities related to the topic of this article:

< = &lt; or <
> = &gt; or >
/ = /      
] = ]
[ = [
" = &quot; or "
' = '
“ = &ldquo; or “
” = &rdquo; or “
‘ = &lsquo; or ‘
’ = &rsquo; or ’
& = &amp; or &

There is a list of resources below which will help you turn HTML tags into character entities automatically, so you don’t have to memorize these character codes.

Using the <pre> tag

To set your code aside so that it looks like a box of code which may be copied and pasted within other code or template file, you can use the <pre> HTML tag.

The <pre> tag instructs the browser to use a monospaced font, but to exactly reproduce whatever is inside of the <pre> tags. Every space, line break, every bit of code is exactly reproduced.

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and me....

Using the <pre> tag isn’t very “pretty” but it does the job. Examples of how to style it can be found in the next section. Still, it showcases the code exactly.

By exactly, we mean EXACTLY. If you have a long line of code, it will run off the page because there are no instructions which tell the code to wrap. It won’t. Here is an example:

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships" href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is important that we have these little <a title="article on communication" href="communication.php">conversations</a> once in a while to let each other know how we feel....

Not pretty, is it. To avoid this screen run-off, put in line breaks. Unfortunately, deciding where to put those line breaks in when you are showcasing code that will be copied makes it a difficult decision.

If you are familiar with programming language, you will know when a line break won’t mess up a line of code, so choose there. If you are unfamiliar with where to put line breaks, experiment. Put the code in, make the line breaks, and then test the code. If it works, then use the line break there. If not, change the line break position.

If you have long lines of code, consider showcasing only excerpts and providing a link to the full code placed on your site in a text or PHP file, or using one of the many online pastebins which are available for temporarily showcasing code.

Troubleshooting Codes

Writing code within a WordPress post can be a challenge, maybe forcing you to override the WordPress default styles and to use filters which “fix” what we write. If you are having trouble with writing code within your WordPress post, this section might help.

Quotes Auto-correction

A frequent problem when using codes within your post is the quotes auto-correction feature of WordPress, mostly known from word processing software. By default, when serving a web page, WordPress converts the straight quotes into the opening and closing “curly” quotation marks according to your WordPress installation language set in the wp-config.php file. Note that the auto-correction (also called smart quotes) feature is applied regardless of whether you have written the quotes in visual or HTML post editor.

In HTML post editor, you can avoid this problem by wrapping the quotes with the <code>, <tt> or <pre> tags. Other solution is replacing quotes with their respective character entities, e.g. using:

<code>&lt;p class="red"&gt;</code>

instead of:

<p class="red">

Note that in some older versions of WordPress, if you edited a page again after publishing it, the HTML editor replaced all these entities with their literal equivalents. For example, if you carefully used " for your quotes, they would have come back as “, and if saved, the auto-correction feature would have an effect on them.

Styling Your Code Tags

By default, using the <code>, <tt> and <pre> tags will put the text in a monospaced font and use the font-size from the <body> tag. What if you want the font-size to be different, and the look of these tags to also have a different color or style to them?

Add styles for these two tags to your style.css stylesheet file located in your current WordPress theme directory. You can use these styles:

pre, code{
    direction: ltr;
    text-align: left;
pre {border: solid 1px blue;
    font-size: 1.3 em; 
    color: blue; 
    margin: 10px; 
    background: #FFFFB3}
code {font-size:1.2em; 
    color: #008099}

Using the <code> tag would then look like this and the <pre> tag would look like this:

pre, code{
direction: ltr;
text-align: left;
pre {border: solid 1px blue;
font-size: 1.3 em;
color: blue;
margin: 10px;
background: #FFFFB3}
code {font-size:1.2em;

     color: #008099}


  • Fun Character Entities
  • WordPress Resource Tools Encode

Frequent Code User

If you consistently use a lot of formulas, functions, and programming code in your posts, consider using a plugin or PHP tool to make the entire process easier. If you tend to post a LOT of code blocks, consider pasting the code in a Paste Bin and linking to it on your site.

How to Use Gravatars in WordPress

What is a Gravatar?

When browsing different web sites, you may notice that many users have a picture next to their name. These pictures are called “avatars.” WordPress, however, uses a specific type of avatar called “Gravatars“–short for “Globally Recognized Avatar.” Unlike standard avatars, Gravatars follow you around the web and automatically appear when you post a comment on a WordPress site.

Example of a Gravatar on a Comment

WordPress integrates Gravatars into every WordPress site. Once registered with Gravatar, the service matches your WordPress profile information to the email address registered with Gravatar and displays your custom Gravatar image next to comments and (optionally) elsewhere on the WordPress site. If you choose not to sign up with Gravatar, the default icon set by the Administrator appears next to your name.

Why use Gravatars?

Providing your users with avatars has become a convention in web-publishing. Enabling Gravatars on your WordPress site simplifies the process for everyone involved. While it is possible to use a WordPress Plugin to manage user avatars on your WordPress-run site, using Gravatars on your site makes less work for both you and your site’s users.

Benefits for Administrators

  • You can add user Gravatars with very little effort
  • You don’t need to maintain an additional Plugin
  • You don’t have to manage user accounts, or their images, for commenters to use Gravatars on your site

Benefits for Users

  • You don’t need to register for every site you visit just to use a Gravatar
  • You can update the Gravatar you use across multiple sites by uploading a single image in a single place

Using Gravatars on your Site

To start using Gravatars on your site:

  1. Log in as an administrator to your site
  2. Navigate to Settings > Discussion and scroll down to the “Avatar” Section
  3. The “Avatar” section presents you with several options:
    • Avatar Display: Toggle Gravatars on and off for your site.
    • Maximum Rating: When users create a profile on Gravatar, they are given the opportunity to rate their Gravatar image as G, PG, R, X based on its appropriateness. Select the radio button for the maximum rating you would like displayed on your site.
    • Default Avatar: WordPress allows for you to select what image you would like to display when a commenter does not have a Gravatar account. Selecting one of the “generated” icons give you and your users some of the benefits of a Gravatar without requiring them to have a Gravatar account. The icons that say “generated” next to them take the email of the commenter and link it to an auto-generated image. Now, every time that commenter posts to your site, they will have the same unique image next to their name.

For Developers

Starting with WordPress 2.7, when you retrieve the comments on a post or page using wp_list_comments, WordPress will automatically retrieve your users’ Gravatars. If you would like to retrieve a user’s Gravatar without retrieving comments, you can use get_avatar.

Customizing how Gravatars are displayed

Using wp_list_comments allows you to customize how WordPress outputs your comments in your theme. It also controls the size of the Gravatar attached to the comments. By default, Gravatars are displayed at 32px x 32px. To change the size of the Gravatar, you can use the ‘avatar_size’ argument with wp_list_comments.

For example, to return a 50px x 50px Gravatar, you would call wp_list_comments like this:

<?php wp_list_comments( array( 'avatar_size' => '50' ) ); ?>

get_avatar works slightly different. The first argument you pass it must be a user’s ID, email address or the comment object. You can then specify the size of the returned Gravatar, the URL for the default image you want to display if a user does not have a Gravatar, and the alternate text for the Gravatar image.

This will return a 50px x 50px Gravatar:

<?php echo get_avatar( '', 50 ); ?>

Customizing Gravatars with CSS

Because you can retrieve Gravatars with or without comments, you need to be specific with your CSS classes when styling Gravatars. When WordPress returns Gravatars, it assigns them the .avatar class. However, you don’t want to only target the class .avatar because it is generated in different contexts. For example, when you hover over the Gravatar in the WordPress admin bar, the Gravatar that appears has the .avatar class. If you were to change the CSS for the .avatar class, you would alter the style of both the Gravatar in your theme’s comments and admin bar.

As the Twenty Eleven theme demonstrates, you can simply use an additional class to target a specific instance of a Gravatar.

This will change the display of Gravatars only in the Twenty Eleven theme’s comments:

.comment-list .avatar {
    Here */

Create a Custom Default Avatar

If you don’t want to use any of the default images for users not registered with Gravatar, you can easily add your own by adding a filter to the avatar_defaults hook.

After uploading the new image to your theme files, add this to your theme’s function.php file:

add_filter( 'avatar_defaults', 'new_default_avatar' );

function new_default_avatar ( $avatar_defaults ) {
        //Set the URL where the image file for your avatar is located
        $new_avatar_url = get_bloginfo( 'template_directory' ) . '/images/new_default_avatar.png';
        //Set the text that will appear to the right of your avatar in Settings>>Discussion
        $avatar_defaults[$new_avatar_url] = 'Your New Default Avatar';
        return $avatar_defaults;

Now, go to Settings > Discussion and select your new avatar from the list.

Select Your New Default Avatar

From now on, all your users that don’t use Gravatar will have this avatar next to their comments.

Custom Default Avatar in Use

Using Gravatar’s Hovercards

If you want to use Gravatar’s Hovercard feature, like on, you can install the Jetpack Plugin.

An example of a Hovercard

Linking Posts Pages and Categories

There are two ways to make internal links from one content page to another in WordPress. One uses permalinks and one does not. The method that does not use permalinks works regardless of whether permalinks are enabled for your site.

Linking Without Using Permalinks

If you are not using Permalinks, how do you link to your posts, categories and Pages?

Using the numeric values such as Post ID, Category ID and Page ID, you can create links as follows.


The Post ID is revealed as part of the URL in the form of “…?post=89”, and that URL is displayed in the browser status bar by hovering the mouse over the Post Title of the target Post in the Posts Screen. Insert it in place of the ‘123’ in this link:

<a href="/index.php?p=123">Post Title</a>


The Category ID is revealed as part of the URL in the form of “…&tag_ID=3”, and that URL is displayed in the browser status bar by hovering the mouse over the Category Name of the target Category in the Categories Screen. Insert it in place of the ‘7’ in this link:

<a href="/index.php?cat=7">Category Title</a>


The Page ID is revealed as part of the URL in the form of “…?post=15”, and that URL is displayed in the browser status bar by hovering the mouse over the Page Title of the target Page in the Pages Screen. Insert it in place of the ’42’ in this link:

<a href="/index.php?page_id=42">Page title</a>

Date-based Archives

To link to a given year of a date-based archive, replace the ‘2015’ part of the below link with the required year.

<a href="/index.php?m=2015">2015</a>

You can also link to a specific month by appending the month to the year in the format YYYYMM, or link to a specific day using the format YYYYMMDD.

<a href="/index.php?m=201501">Jan 2015</a>
<a href="/index.php?m=20150101">Jan 1, 2015</a>

Links On External Sites

If you are providing a link to your site from outside of your site, be sure to specify a full URL to the correct location:

<a href="">post title</a>

If you have installed WordPress to a subfolder, such as wordpress, don’t forget to add the folder to the link URL:

<a href="">post title</a>

Linking Using Permalinks

If you are using permalinks, you can use all of the above non-permalink techniques, which will work with permalinks enabled or not. If you have enabled permalinks, you have a few additional options for providing links that readers of your site will find a bit more user-friendly than the cryptic numbers.

The complexity of the URL depends on the complexity of your permalink configuration. If your permalink configuration (set on the Options > Permalinks Administration Screen) contains many Structure Tags, then the URL will be more difficult to construct.


For posts, replace each Structure Tag in your permalink structure with the data appropriate to a post to construct a URL for that post. For example, if the permalink structure is:


Replacing the Structure Tags with appropriate values may produce a URL that looks like this:

<a href="/index.php/archives/2005/04/22/my-sample-post/">My Sample Post</a>

To obtain an accurate URL for a post it may be easier to navigate to the post within the WordPress blog and then copy the URL from one of the blog links that WordPress generates.

Review the information at Using Permalinks for more details on constructing URLs for individual posts.


To produce a link to a Category using permalinks, obtain the Category Base value from the Options > Permalinks Administration Screen, and append the category name to the end.

For example, to link to the category “testing” when the Category Base is “/index.php/categories”, use the following link:

<a href="/index.php/categories/testing/">category link</a>

You can specify a link to a subcategory by using the subcategory directly (as above), or by specifying all parent categories before the category in the URL, like this:

<a href="/index.php/categories/parent_category/sub_category/">subcategory link</a>


Pages have a hierarchy like Categories, and can have parents. If a Page is at the root level of the hierarchy, you can specify just the Page’s “page slug” after the static part of your permalink structure:

<a href="/index.php/a-test-page">a test page</a>

Once again, the best way to verify that this is the correct URL is to navigate to the target Page on the blog and compare the URL to the one you want to use in the link.

Date-based Archives

To permalink to a given year of a date-based archive, append that year to the archive’s base link. For example, to link to the year 2015 in an archive with the base link /index.php/archives/ you would use:

<a href="/index.php/archives/2015">2015</a>

You can also permalink to a given month or date by appending month and day values to the corresponding year.

<a href="/index.php/archives/2015/01/">Jan 2015</a>
<a href="/index.php/archives/2015/01/01/">Jan 1, 2015</a>

Links on External Sites

Permalink structures should begin with a slash, meaning that they are anchored at the root of the site’s URL. You should be able to prepend the protocol and server name to any link that begins with a slash to build a successful full URL.

For example, this category link:

<a href="/index.php/categories/parent_category/sub_category/">subcategory link</a>

Becomes this category link using a full URL:

<a href="">subcategory link</a>

Combining Links with Template Tags

You can customize your links in the header, footer, or sidebar to be combinations of link types. This example features links to two categories, the main index page, a post, a static page, and uses the Pages template tag.

Note carefully that the wp_list_pages() template tag generates its own List Item (LI) so it doesn’t need to be wrapped in a LI tag. This template tag is also set to list only the parent Pages and not their subPages or “children”.

<ul id="linklist">
  <?php _e('Check It Out'); ?>
  <ul id="pageslist">
    <a title="Home Page" href="index.php">Home</a>
    <a title="Blog" href="index.php?cat=7">Blog</a>
    <a title="Life Story" href="index.php?p=12">My Life Story</a>
   <?php wp_list_pages('exclude=4&depth=1&sort_column=menu_order&title_li='); ?>
    <a title="Links and Resources" href="index.php?cat=33">Links</a>
    <a title="Site Map" href="sitemap.php">Site Map</a>

Using such a customized list, you can also add CSS classes to change the look of each of the links, or style the entire section. It’s up to you.

Absolute versus Relative Links

Absolute links define absolutely where to find the target of the link.
Relative links define the location of another document in relation to the current document.

Absolute Link Examples

Full URIs of the form are absolute links.

Absolute links can also point to your own server. When doing so, you may safely omit the prefix, and link to the target with a full path:


The leading slash means “At the very top of this domain is a directory named wordpress, and inside this directory is a file named index.php“.

A document at

contains a link of the form


The link above, when clicked, will take the viewer to

Relative Link Examples

Relative links do not start with a slash:


The lack of a leading slash means “Inside the current directory is a sub-directory named wordpress, and inside that directory is a file named index.php“.

A document at

contains a link of the form


The link above, when clicked, will take the viewer to

Let us consider the case where in our blog where we are editing

From it we can make links

  1. <a href=”../01/happy-new-year”>New Years Announcement</a>
  2. <a href=”../../01/01/happy-new-year”>New Years Announcement</a>
  3. <a href=”../../../2015/01/01/happy-new-year”>New Year’s Announcement</a>
  4. <a href=”../../../2014/12/25/merry-christmas”>Christmas Announcement</a>

Note 1, 2, and 3 are all valid to achieve the same link. However with 4 there is no shortcut, as we must “climb” all the way into the previous year.

The links are all relative and we need not hardwire in any more knowledge than is necessary, which also will help portability if one day we export the blog elsewhere. (What happens if one day we however pick a different permalink structure via the administration screens is unknown…)

However, the above assumes we are always viewing a single post. If in fact we are viewing that same post in an archive, well, then all our assumptions of where we are now are wrong! So we see that however smart relative linking looks, it has a fatal flaw and cannot be chosen!

For more information on absolute and relative links, see the WebReference Tutorial on Absolute and Relative Links.

Dynamic Linking in Templates

Whether you use permalinks or not, in templates you can link to pages or posts dynamically by referring to its unique numerical ID (seen in several pages in the admin interface) with <a href="<?php echo get_permalink(ID); ?>">This is a link</a>. (as shown in Template_Tags/get_permalink)

This is a convenient way to create page menus as you can later change page slugs without breaking links, as IDs will stay the same. However, this might increase database queries.

Dynamic page menus can also be created by utilizing Template_Tags/wp_list_pages child_of parameter or some of the many available plugins.