Site Design and Layout Receive Updates For This Category

Introduction

GUsually, plugin and theme authors need to provide access to a settings (options) screen so users can customize how the plugin or theme is used. The best way to present the user with such a screen is to create an administration menu item that allows the user to access that settings screen. This article explains how plugin authors can add administration menus and screens. Note: the following information assumes a knowledge of the basics of Writing a Plugin and using the Plugin API of Actions and Filters.

Every Plot Needs a Hook

To add an administration menu, you must do three things:

1. Create a function that contains the menu-building code
2. Register the above function using the “admin_menu” action hook
3. Create the HTML output for the page (screen) displayed when the menu item is clicked

It is that second step that is often overlooked by new developers. You cannot simply call the menu code described; you must put it inside a function, and then register the function.

Here is a very simple example of the three steps just described. This plugin will add a sub-level menu item under the Settings top-level menu, and when selected, that menu item will cause a very basic screen to display. Note:this code should be added to a main plugin PHP file or a separate PHP include file.

In this example, the function, my_plugin_menu(), adds a new item to the Administration menu via the add_options_page function. Note: more complicated multiple menu items can be added, but that will be described later. Notice the add_action line–that invokes the hook which “registers” the function, my_plugin_menu(). Without that add_action, a PHP error for “undefined function” will be thrown when attempting to activate the plugin. Finally, the add_options_page code refers to the my_plugin_options() function which contains the actual page to be displayed (and PHP code to be processed) when someone clicks the menu item.

The actual detail of these processes is described in more detail in the sections below. Remember to enclose creation of the menu and the html page in functions, and invoke the admin_menu hook to get the whole process started!

Determining Location for New Menus

Before creating a new menu, first decide if the menu should be a top-level menu, or a sub-level menu item. A top-level menu displays as new section in the administration menus and contains sub-level menu items. A sub-level menu means the menu item is a member of an existing menu.

It is rare that a plugin would require the creation of a top-level menu. If the plugin introduces an entirely new concept or feature to WordPress, and needs many screens to do it, then that plugin may warrant a new top-level menu. Adding a top-level menu should only be considered if you really need multiple, related screens to make WordPress do something it was not originally designed to accomplish. Examples of new top-level menus might include job management or conference management. Please note with the native post type registration, WordPress automatically creates top-level menus to manage those features.

If the creation of a top-level menu is not necessary, decide under what top-level menu to place your sub-level menu item. As a point of reference, most plugins add sub-level menu items underneath existing WordPress top-level menus. For example, the Backup plugin adds a sub-level menu option to the Tools top-level menu. Please note with the taxonomy registration, WordPress automatically creates sub-level menus under the applicable top-level menu to manage those features.

Go to Detail Page

ynamic menu highlighting is a way to give users a reference point with which to navigate. It is like the dot on the map that says “you are here”. WordPress.org has utilized dynamic menu highlighting.

This image illustrates that the user is currently looking
at a page under the menu “DOCS”.
By looking at the menu list you can, due to the use of the dark thick line easily ascertain that you are currently on a page within the “DOCS” or documentation section of the site.

This article will explain how to go about making a navigation menu that dynamically highlights the currently displayed page, however there are plugins available that can do most of the work for you.

Also note that if you use the Pages sidebar widget (that comes with wordpress) to display your menu, it already has a CSS class current_page_item, which you can use to achieve the same effect. You can access it like this in your CSS:

.widget_pages li.current_page_item a{
background-image:url(images/activelink.gif);
}

Overview

There are a number of components that make dynamically highlighted navigation work. These include :

1. highlighting your current location or navigation position between page loads,
2. highlighting other navigation points on mouse-over,
3. showing submenus of navigation, leaving a breadcrumb trail (Not in the scope of this article).
4. There are also many different possible approaches to achieve dynamically-highlighted navigation. These include for example Javascript, Flash, HTML and CSS in conjunction with PHP. This article covers the CSS/PHP method.

Basic Navigation Lists

The basic navigation list might look something like this:

• Page One
• Page Two
• Page Three
• Page Four

And there would likely be some bit of CSS in the pages stylesheet that would specifically style list items with the “current” ID differently from other list items.

This works fine with static HTML pages, but when dealing with dynamic pages, things become a little more complicated. Perhaps this menu is supposed to be in a sites sidebar and the sidebar is contained in a single file that is called from multiple places. Obviously, as written, only one item would ever be highlighted, no matter what page is actually being viewed. That is not what we want at all!

Making the Code Dynamic

PHP allows us to add the desired highlighting effect that reacts to whatever page is being viewed. Coupled with WordPress is_ functions, we can dynamically test what page is being viewed and then rewrite the code based on the results of that test.

There are two ways to go about this. One requires us to create a variable ($current) that will always equal the page number we are on. It also requires us to put some CSS on each page instead of keeping it all in the main CSS document. The other way means a bit more of a mess with PHP, but it means we get to keep all our styling in a single CSS document.

Method One: With CSS On Each Page

The first step in this method is to remove the one id=”current” from the list and then add a unique id attribute to each list item.

• Page One
• Page Two
• Page Three
• Page Four

The next part is where PHP comes in.

We need to write a conditional statement that will test what page is being viewed and define a variable based on the results of that test.

This piece of code uses the is_page(); function to check the title of the current page. If the title is “Page One,” the variable $current is assigned the value of “one;” if it is “Page Two,” $current becomes “two;” etc., etc. On a WordPress template, this would go in the header.php file between the tags.

Go to Detail Page

What is a Gravatar?

Gravatars are Globally Recognized Avatars. An avatar or gravatar is an icon, or representation, of a user in a shared virtual reality, such as a forum, chat, website, or any other form of online community in which the user(s) wish to have something to distinguish themselves from other users. Created by Tom Werner, gravatars make it possible for a person to have one avatar across the entire web. Avatars are usually an 80px by 80px image that the user will create themselves.

Gravatars in blog post comments
A Gravatar is essentially the same thing, but they are all hosted on a single server and are called up by encrypting the users email address via the MD5 algorithm. So instead of having one avatar on one forum you visit, and another at a blog you visit, you could have the same avatar at both.
Gravatars can easily be used within WordPress with the Gravatar WordPress Plugin or added manually in the index.php, comments.php and comments-popup.php template files.

How a Gravatar is Constructed

A Gravatar is a dynamic image resource that is requested from a server. The request URL is presented here, broken into its segments. The URL always begins with:

http://www.gravatar.com/avatar/

The next part is a hashed version of the users email address. The email address MUST be lower-cased first, then have all whitespace removed, before md5 hashing it.

279aa12c3326f87c460aa4f31d18a065
An optional rating (or r) parameter may follow with a value of [ G | PG | R | X ] which determines the highest rating (inclusive) that will be returned.

?r=R
An optional size (or s) parameter may follow that specifies the desired width and height of the Gravatar. Valid values are from 1 to 512 inclusive. Any size other than 80 will cause the original Gravatar image to be resampled using bicubic resampling before output.

&s=120
An optional default (or d) parameter may follow that specifies the full URL, encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that Gravatar has a rating higher than is allowed by the rating parameter. It may also contain one of the following options:

Go to Detail Page

What Are Smileys?

Smileys, also known as “emoticons,” are glyphs used to convey emotions in your writing. They are a great way to brighten up posts.

Text smileys are created by typing two or more punctuation marks. Some examples are:

To learn more about emoticons and their history, see the Wikipedia entry on Emoticons.

How Does WordPress Handle Smileys?
By default, WordPress automatically converts text smileys to graphic images. When you type in your post you see when you preview or publish your post.

To Turn off Graphic Smileys
If you turn off graphic smileys, whatever you type in plain text will remain, and be displayed, as plain text.

Go to your Admin Panel
Select Settings -> Writing
In the Formatting section, uncheck the box for “Convert emoticons like and to graphics on display”
Turning off emoticons means that when you type in a post you will see when you preview or publish your post. So it does not stop you from using emoticons as plain text.

Troubleshooting Smileys
Why Does not it Work?
Smileys may have been disabled by your WordPress admin. Another possibility is the smiley image files have been deleted from /wp-includes/images/smilies.

Why Does not it Work for Me?
If smileys work for others at your site but not for you:

Type a space before and after your smiley text. That prevents the smiley being accidentally included in the text around it.

Make sure not to use quotes or other punctuation marks before and after the smiley text.

Where Are My Smiley Images Kept?
The smiley or emoticon image graphics are found in the /wp-includes/images/smilies directory.

Note that smileys is spelled eys in this documentation and the directory name for the smiley images is “smilies, spelled ies”

How Can I Have Different Smiley Images Appear?
Simplest way:

Find your smiley image files in the /wp-includes/images/smilies directory and back them up to another directory
Note the names of each smiley file. Your files must match these names and should be in the same “gif” image format.
For predictable behavior, the image sizes should be similar.
Upload your new files to the /wp-includes/images/smilies directory with an FTP program.
If you are up to hacking the code:

If you really must change the file names of the images, edit the file that refers to these images, (in WordPress 2.2, they are located in “functions.php”), situated in the /wp-includes/ directory. Follow all precautions when “hacking code”.

You can read a tutorial explaining all this in more detail, as well as how to avoid hacking WP code, at Ars Aranea.

There are also WordPress Plugins which allow you to customize your smilies in WordPress.

Why are my Smiley Images Blank?
If you recently uploaded the images, it could be that the images have been uploaded in ASCII format by your FTP program. Re-upload the smileys ensuring that they are transferred in BINARY format.

Some FTP programs have an auto-detect setting which will upload files in the correct format without user intervention. If you have such a setting, turn it on.

Smiley CSS
The smiley images in WordPress are automatically given a CSS class of wp-smiley when they are displayed in a post. You can use this class to style your smileys differently from other post images.

For example, its not uncommon to set up images in a post to appear on the left-hand side of the content with text flowing around the image. The CSS for that might look like this:

.post img {
float: left;
}
This would typically affect all images in a post, including your smiley images. To override this so that smileys stay inline, you could add this to your CSS:

img.wp-smiley {
float: none;
}
For more on CSS in WordPress, you might want to start here.

Go to Detail Page

When you lean towards someone and tell them a little bit of information, you are making an “aside” comment. In blogs, you can do that on your blog by passing on small bits of information to your readers called Asides.

Also known as remaindered links or linkblog, Asides were originally implemented by Matt Mullenweg, developer of WordPress, and it soon spread far and wide and became a very popular method of adding little bits of information to your blog.

Asides can be run from within your WordPress site, and do not require installation of another blog. All you need is a few lines of code, and a new category.

Using Asides requires you to make some changes in the WordPress Loop, but if you are careful, everything will be all right.

Asides With Plug-Ins

A number of different Plugins are available to allow you to add Asides to your blog easily. Take a look through the built-in Plugin browser to find one.

Asides With Code Hacking

If you are comfortable editing PHP files, then these two approaches are for you.

Matts Asides

Asides at photomatt.net
The following are the step by step instructions for manually adding Asides to your WordPress site. Below are WordPress plugins that will make the process much easier.
1. Make a backup copy of your index.php in your WordPress Theme, typically found at /wp-content/themes/yourtheme. Seriously. BACK IT UP!!
2. In your Administration Panels > Manage > Categories add a category for your Asides. You can call it Asides if you want. Note the Category ID number of the category. In the following examples we will use category ID 14, but you change this to the category ID of your Asides category.
3. Open your Themes index.php template file in a text editor.
4. Search for:

Comment it out like this:

5. Under this paste:

6. The next line should be your date call (). Under that, paste this:

7 At the bottom of the index.php file, find:

8. Delete those lines. And instead, paste these lines:

Thats it. Asides should now be working. Only thing that remains is styling the CSS.

Styling Your Asides

What weve done is create a very basic style. You should add your own style to blend it in with the rest of your site.

To style the Asides, add these example lines to the CSS:

Displaying Asides on the Sidebar

Asides on the Sidebar at noscope.com
REMEMBER: The following section has nothing to do with Matts asides. They are INDEPENDENT of each other and will not work with each other.
There are times when you want to display your Asides in your sidebar. In the sidebar.php template file of your WordPress Theme, add the following where you wish the asides to appear. If you want them outside of the list, make sure to position this above or below the Unordered List (

) tags or within them as a List Item (
• ):

  Now, you can style the CSS for the div “asides_sidebar” to your liking in the style.css style sheet.

  With Asides in the sidebar, you may want to disable them from being displayed within the main loop. This can be easily done with a snippet of code within the loop.

  Either before the loop in your index.php file or before the loop in your sidebar.php file, depending on which one comes last. So, for example, if comes after the line in index.php, then you will have to put it before the loop in sidebar.php.

  Voila. Asides will now be displayed on the sidebar, rather than within the loop, giving it a more ’linkblog‘ feel.

  Go to Detail Page

Horizontal Menus are an excellent way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Many web designers place a horizontal menu under the header, where they draw the eye.

Horizontal menus are created with the HTML List feature. Yes, while they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow us to set the list to run on one line instead of a separate line for each list item.

Since horizontal menus are simply lists in a horizontal line, lets start the process with a list.

Contents

[hide]
1 Creating a Horizontal Menu
1.1 Applying the CSS
2 Without CSS
3 More Information on Horizontal Menus
Creating a Horizontal Menu
Below is the simple list for our horizontal menu. We recommend you keep your list small as too many will stretch wide across the screen and may cause some layout problems. We have enclosed the list in a division called navmenu.

As you can see, within our list we have included a PHP tag for the “home page” and several categories, as well as a link to WordPress, those helpful folks. The list would look like this, in its simplest form (as styled by the Codex):

HOME
RECIPES
TRAVEL
WORDPRESS
You can also use the wp_list_categories() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:

The place to put your new list might be just under the header. In WordPress v1.5, open the header.php file in the WordPress Theme folder you are using. Paste the code at the bottom of the file after the header DIV and then save the file.

In WordPress v1.2, open the index.php file and look for the end of the header section and place your list code there.

Applying the CSS

By default, a list runs vertically, each item on its own line. It also includes an image, known as a bullet, before each line. In your stylesheet, we need to add a reference to the navmenu and the first step is to remove the bullet and set our margins and padding to zero for the whole list.

Go to Detail Page

Your posts are filed in different categories. Category information is freqently displayed in the post meta data section near your post or under the heading title. Different WordPress Themes highlight the post meta data section in different areas.

The display of the post categories is generated through the use of the the_category() template tag. And you have the ability to style how these categories are displayed.

Finding Your Categories Tag

The placement of your categories tag may be in one place on the front page and in one or more different places in your single post page, so you may have to do some hunting to find your various categories tags. You might also want to style one differently from the others, but you still have to find them.

The post meta data featuring your categories tag in your Theme is usually found on the index.php, single.php, or sometimes in the sidebar.php template files. Open one or more of these template files and search for:

Once you have found it, take another look at a generated web page of your site and determine how exactly you might want to change this information.

The the_category() template tag instructs the database to get the information regarding the post categories and display it at that point in your template file. By default, it displays the list of categories with a space between each one. You can change this by adding the parameter inside of the tag. Lets begin with simple separators by playing with the category names: WordPress, Computers, and Internet News.

Simple Separators

If you would like to have commas between the categories, the tag should read:

php the_category(

Go to Detail Page

Styling for Mobile devices (cell phones, some PDAs, etc) can be accomplished in much the same way as you can customize the style for printed pages.

The main difference between the two is that instead of using a media type of “print”, you will use a media type of “handheld”.

User agents (web browsers) decide which CSS media type to use based on what they are doing. Much like the “print” media type is used by browsers whenever they print a document, the “handheld” media type is used by many different small-screen browsers, when present.

One of the things you might consider doing for small screens, is, for example, hiding the sidebars and other non-text elements. Or, if you use a fixed width page, you will probably want to eliminate that fixed width restriction, and perhaps make the blog entirely simple text format, allowing it to wrap properly on small screens.

It is also good practice to use percentage-based measurements rather than fixed pixel widths. For example, in your css file give the tag body one text size and in text based tags or any tags that you use text in give them a percent to use and test it on a phone.