Creating Horizontal Wordpress Menus

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.

Hire us for develop any wordpress site

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, let's start the process with a list.
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've enclosed the list in a division called navmenu.

<div id="navmenu">
<ul>
    <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
    <li><a href="wordpress/recipes/">RECIPES</a></li>
    <li><a href="wordpress/travel/">TRAVEL</a></li>
    <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

As you can see, within our list we've 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_cats() 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:

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php list_cats('FALSE', '',
                '', '', TRUE, FALSE,
                FALSE, TRUE, TRUE,
                FALSE, , '', ,
                '', '', '2,6,7,8,9,10,11,12',
                FALSE); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

Hire us for develop any wordpress site

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.

#navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }

If you save and upload your stylesheet, then refresh the test page in your web page browser, you would see that your list now has no bullets and no indents, if everything is working right.

Now, we need to add the technique that will set this list into a horizontal line. We need to add a style reference to the list item itself.

#navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

Because these are links, we have to take a moment to clean up the look of the links. There are many things you can do to style this list, but for now, let's add some space to the list of links so they aren't crowded together and remove the default link underline and have the link change colors when the mouse moves over it.

#navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

Okay, we can't resist. Let's take this another step further and give our new horizontal menu list some real jazz. See if you can tell what is being done to change the look.

#navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
    padding: 5px 20px 5px 20px; color: blue;
    background: pink;}
#navmenu ul li a:hover {color: purple;
    background: yellow; }

If we did this all correctly, your list should look like this:

• HOME
• RECIPES
• TRAVEL
• WORDPRESS

Read More

Designing Wordpress Headers

They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header.

Hire us for develop any wordpress site

The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgements about what they are about to see and read. The same people who say you can not judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that.

We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header.
The WordPress Header

By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Admin > Options panel, and WordPress does the rest.

In its simplest form, the Classic WordPress Theme features the header code like this in the header.php template file:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. You can learn more about these parameters in the documentation for bloginfo(). Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Admin > Options panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Options panel.

The Default WordPress Theme features an image in the background and presents the header like this:

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>

Again, the template tag featuring the name of the blog or website is in a link, but this shows another usage similar to the URL request above. It gets the same information, just in a different way. It also adds the description of the site from the Options panel.

Hire us for develop any wordpress site

Basically, these two header examples do the same thing in different ways. They provide information in the header, with the potential for an image, and make the header title clickable to help navigation on the site. It is just a matter of how much information you want in your header, and how that information is displayed.

Using the first example from the Classic Theme, an image can still be used in the background, set within the style sheet in the h1 selector, but the second one gives more control to the use of an image in the header by giving it its own division. How these look are totally controlled by the style sheet.
Styling the Header

As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places.

In the Classic Theme, the CSS for the header are found in one selector, the #header.

#header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
}

The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left.

All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute.

The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php's "head" tag and the style.css, though once you have your styles set, you can move the information into your style sheet.

The styles that control the header's look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look.

Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool.

If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually.
Connections Theme Header
Changing the Header Image

There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php "head" section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this:

#header {
  background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg")
  no-repeat bottom center; }
#headerimg  {
  margin: 7px 9px 0;
  height: 192px;
  width: 740px; }

To change the image file, replace the "kubrickheader.jpg" with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic's location.

If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions.

Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine-tune the placement and look.

With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following:

    h1
    header
    headerimg
    description

Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header.

If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size.
Red Train Theme Header
Header Image Specifications

A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header.

If you are modifying the entire site's Theme, the width of the overall page or content area needs to be taken into consideration for the header image's size. The two most common screen sizes are 1024x768 and 800x600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280x1024 and 1600x1200.

If you set your website to "float," positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or "elastic" screen width, then the width of your header becomes important.

If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space:

#header {
background: url("/images/kubrickheader.jpg")
repeat-x top left; }

This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs.
 

Header Art

A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some free header art sites, some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature.

Choosing pre-made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size.

Digital Westex's WordPress Header Art features a wide range of header art sized and ready for free download specifically for WordPress.
Header Art Copyrights

The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image's use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use.

As header art is made and licensed "as is" by the designer/artist, some header art cannot be modified without the artist's permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork.
Designing Your Own Header Art

You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you're going to put it in.

You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it "for the web" as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint's GIF-JPG-PNG What's the Difference article. These file types will compress the image's resolution, reducing the file's size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times.
Fast Track Theme Header
Hiding the Header Text

Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.

To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector:

h1 {display:none; font-size: 230%; color: blue;.......

It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there."

It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, "turning the visibility" back on. The other method is to position the content literally "off the page" by a negative indent. Here is an example:

h1 {
   font-size: 0;
   text-indent: -1000px; }

This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still "read" the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers.

 Making the Whole Header Clickable

To make the entire header, graphic and all, clickable, you have two choices. You can either change the position of the link to surround the entire area, or add links to the specific areas to encompass them all.

To make the entire header of the WordPress Classic Theme into a clickable header:

<a href="<?php bloginfo('url'); ?>">
  <h1 id="header">
    <?php bloginfo('name'); ?>
  </h1>
</a>


You can use the method offered by the Theme's author to make the entire WordPress Default/Kubrick Theme header clickable:

    Open header.php template file.
    Change from <div id="header"> to:

<div id="header" onclick="location.href='http://siteaddress/';" style="cursor: pointer;">

What if you want only the text areas of the header to be clickable and not the entire header image? Add links only to the title and description:

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a href="<?php echo get_settings('home'); ?>">
     <?php bloginfo('description'); ?>
   </a>
  </div>
 </div>
</div>

And if you want to have different links to the two lines of text in your header, then change one of them to the link you want:

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a title="Home Page" href="home.php">
   </a>
  </div>
 </div>
</div>


Head Theme Header
Rotating Header Images

There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator.

Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page:

#header {
background: url("/images/headerimgs/rotate.php")
no-repeat bottom center; }

To actually put this in your header, or elsewhere on your site, add an image link like this within the header division:

<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

 Adding Navigation to Your Header

Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements.

This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag.

In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (<ul><li>) without dates or post counts, does not hide empty categories, uses category "description" for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own "category" division. Notice that a link to the "home" page or front page has been included manually at the start of the list.

<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->

To style this list, the #categorylist in the style.css might be:

#categorylist {font-size:12px; font-style:normal;
        text-transform:uppercase; }
#categorylist ul {list-style-type: none; list-style-image:none;
        margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}

Read More

Explore Your New WordPress Blog

Once you have WordPress installed, you should spend some time exploring it. To log in to your newly installed blog, go to http://yourblogdomain.com/wp-admin and enter the username and password you used when you set up the site.

A test site is also available at http://wpsandbox.com.

To log in to the test site:

•     Go to http://www.webdeveloperszone.com/wp-admin.
•     Type admin for the user name.
•     Type password for the password.
•     Click Log in.

You'll see the admin panel that you use to write posts and modify your blog. Tour the admin panel. The Admin panel provides four main tabs at the top and three smaller tabs on the far right.

•     Write tab: write posts and pages.
•     Manage tab: edit posts, pages, categories, tags, your blogroll, and more.
•     Design tab: change your theme, configure your sidebar, and see the code of your theme's files.
•     Comments tab: see the latest comments on your site.

Explore these main tabs and subtabs to see the different functions they perform.

More Information:

•     Admin Panel
•     The WordPress Dashboard (video)

Configure General Settings
You need to configure some basic settings in your blog, such as the title, tagline, time zone, and your name. Click the Settings tab on the far right, and then browse through the available subtabs -- General, Writing, Reading, Discussion, Privacy, Permalinks, and Miscellaneous. Select the options you want.

As you're configuring your settings, be sure to enable permalinks and allow comments without moderation. Permalinks make your URLs intelligible names that reflect the title of your post, rather than something like ?p=123. Comments also need configuration. By default, comments must be approved before they appear on your site.

To configure your settings, at the very least do the following:

1.     Enable permalinks by going to Settings > Permalinks. Select the Day and Name option (if you select another option, it's more difficult to set your page URLs).
2.     Enable comments to appear immediately by going to Settings > Discussion. In the "Before a comment appears" section, select only the Comment author must fill out name and e-mail check box.
3.     Set the blog title and tagline by going to Settings > General. Usually the blog title and tagline automatically appear in your blog's header.
4.     Set the correct time zone by going to Settings > General and selecting the appropriate UTC number in the Timezone section. (PST is UTC - 5). 

  Import Your Content from Blogger or Elsewhere
If you're transitioning to WordPress from another blog platform, you can import your old content. Go to Manage > Import and select the specific software you're importing from. Almost all blogs can be imported into WordPress. However, when you import content from another site, only the posts, categories, and tags import, not any pictures.

 Write a Post
Posts are the regular blog entries you write that appear on your home page. You write posts by clicking the Write tab. By default, the Posts subtab is selected. Complete the fields and information, select or create a category, and then click the Publish button. Writing posts is the most common activity you'll do in the admin panel. When you write blog posts, keep your paragraphs short, use subheadings, include images, and avoid a stuffy tone. To insert a "Read more ..." tag, click the Read More button on the toolbar.

 Create a Page
Pages are for content such as "About Me," "Contact Me," etc. Pages live outside of the normal blog chronology, aren't included in your RSS feed. They're often used to present information about yourself or your site that is somehow timeless -- information that is always applicable. You can use Pages to organize and manage any amount of content. Other examples of common pages include Copyright, Legal Information, Reprint Permissions, Company Information, and Accessibility Statement. (By the way, it's a good idea to always have an about page and a contact page -- see this advice from Lorelle.) 

Read More

Advantages of Self-Hosted WordPress Blogs

A self-hosted WordPress blog has a number of advantages over freely hosted blogs. With a self-hosted WordPress blog, you have complete control over your code, so you can implement any theme, modify it entirely, or create your own.

You can add any plugin you want, and then hack the code. The application's code is completely open, allowing you total access to modify, tweak, or explore what you want.

WordPress has a large community of enthusiastic bloggers who help each other in forums, create and share themes and plugins, and help move the software forward with new features and better design.

With such freedom, what you can do with a WordPress blog can be a bit overwhelming. The WordPress Codex (the wiki manual for WordPress) has hundreds of pages and can be daunting in scope.

The intent of this WordPress Quick Start Guide is to get you up and running with WordPress and give you a brief overview of the most important concepts and techniques. It covers the most common setup tasks you need to technically launch, configure, and manage your blog. It then lays down some concepts for more advanced theme modification.

Note: WordPress.org differs from WordPress.com in a fundamental way. WordPress.org provides WordPress software that you can download and install on the server space you rent from a web host. In contrast, WordPress.com provides free hosting for your WordPress.com blog, but restricts the themes and plugins you can implement. With WordPress.com, you have to pay extra to modify your stylesheet, and you can't display ads or manipulate any of the code. (For more information on the difference, see WordPress.com Versus WordPress.org. Everything in this guide relates to self-hosted WordPress blogs.
Become Familiar with FTP

One tool you'll need to manage your WordPress files is an FTP program, such as Filezilla. Through FTP, you'll upload themes and plugins to your blog, and if your web host doesn't support auto-installers, you'll need an FTP program to install your blog.

Filezilla is a simple program. All it requires is your server address, username, and password to connect to your web host. When you connect, the remote host's files appear in one column (the right), while your local files appear in the left column. You transfer files or folder from your local host to the remote host by dragging the files to the remote host column. After you enter your FTP details once, use drop-down arrow next to the Quick Connect button to connect immediately.

More Information:

•     Filezilla
•     Filezilla Tutorial
•     FTP Clients

Install WordPress on Your Web Host
You need a web host that has PHP and MySQL, and preferably one with cPanel to make the installation of WordPress as simple as possible. In my experience, BlueHost probably has the best support of any web host, and it has the easiest auto-installer: Simple Scripts. After you sign up with a web host, navigate to the cPanel (or the equivalent) and look for Simple Scripts, Fantastico, or some other auto-installer for WordPress. If there isn't an auto-installer, you have to install WordPress manually following the "famous 5 minute install" instructions, which are fairly simple. See the resources below for instructions on the different installation methods.

To install WordPress on a Web host:

•     Sign up for a web host plan (for example, at BlueHost.com).
•     Log into your cPanel by going to http://yourdomain.com/cpanel.
•     Click the Simple Scripts feature (or, alternatively, the Fantastico feature).
•     If no auto-installer exists, follow the steps for the 5 minute manual install.
•     Install a WordPress blog.

The WordPress installation arranges files in three main folders (wp-admin, wp-content, and wp-includes). It also installs loose files in the root folder. Most of the uploading you'll do is with the wp-content folder.

Note:When you connect to your remote host, you may have to go into the public_html or www folder to see the WordPress files. Both folders open the door to your WordPress content. The folders simply mirror each other to deliver the same results when users go to either http://www.yourdomain.com or http://yourdomain.com.

The wp-Content folder has two important subfolders: plugins and themes. When you upload a plugin or theme to these folders using FTP, the plugin or theme is available for activation inside your WordPress admin panel. Also, any images you upload when writing a post in WordPress are stored in the wp-content/uploads folder.

Read More

Writing Posts on Wordpress

Posts are the entries that display in reverse chronological order on your home page. In contrast to pages, posts usually have comments fields beneath them and are included in your site's RSS feed.

To write a post:
    Log in to your WordPress Administration Panel.
    Click the Write tab.
    Start filling in the blanks.
    As needed, select a category, add tags, and make other selections from the sections below the post. Each of these sections is explained below.

When you are ready, click Publish.
Title
    The title of your post. You can use any words or phrases. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post like "My Site - Here's Lookin' at You, Kid." WordPress will clean it up for the link to the post, called the post-slug.

Post Editing Area
    The big blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual or the HTML view to compose your posts. For more on the HTML view, see the section below, Visual Versus HTML View.

Preview this Post
    Allows you to see how your post will look before officially publishing it.

Publish Status
    Shows three states for the post: Published, Pending Review, and Unpublished. A Published status means the post has been published on your blog for all to see. Pending Review means the draft is waiting for review by someone else prior to publication. Unpublished means the post has not been published and remains a draft. If you select a specific publish status and then click the Save button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and then click Save. You can see all posts organized by status by going to Manage > Posts.

Permalink
    After you save your post, the Permalink below the title shows the potential URL for the post, as long as you have permalinks enabled. (To enable permalinks, go to Settings > Permalinks.) The URL is generated from your title. In previous versions of WordPress, this was referred to as the "page-slug." The commas, quotes, apostrophes, and other non-HTML favorable characters are changed and a dash is put between each word. If your title is "My Site - Here's Lookin' at You, Kid", it will be cleaned up to be "my-site-heres-lookin-at-you-kid" as the title. You can manually change this, maybe shortening it to "my-site-lookin-at-you-kid".

Save
    Allows you to save your post as a draft rather than immediately publishing it. To return to your drafts later, click the Manage tab, click the Drafts link that appears below the Manage Posts title, and then click your draft post.

Publish
    Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the Publish button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Press This
    A Press This shorcut can be created by adding the Press This link to your favourites.

Tags
    Refers to micro-categories for your blog, similar to including index entries for a page. Posts with similar tags are linked together when a user clicks one of the tags. Tags have to be enabled with the right code in your theme for them to appear in your post.

Categories
    The general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. To add a new category, click the +Add New Category link in this section. You can manage your categories by going to Manage > Categories.

Excerpt
    A summary or brief teaser of your posts featured on the front page of your site as well as on the category, archives, and search non-single post pages. Note that the Excerpt does not usually appear by default. It only appears in your post if you have changed the index.php template file to display the Excerpt instead of the full Content of a post. If so, WordPress will automatically use the first 55 words of your post as the Excerpt or up until the use of the More Quicktag mark. If you use an Explicit Excerpt, this will be used no matter what. For more information, see Excerpt.

Trackbacks
    A way to notify legacy blog systems that you've linked to them. If you link other WordPress blogs, they'll be notified automatically using pingbacks. No other action is necessary. For those blogs that don't recognize pingbacks, you can send a trackback to the blog by entering the website address(es) in this box, separating each one by a space. See Trackbacks and Pingbacks for more information.

Custom Fields
    Custom Fields offer a way to add information to your site. In conjunction with extra code in your template files or plugins, Custom Fields can modify the way a post is displayed. These are primarily used by plugins, but you can manually edit that information in this section.

Comments & Pings
    Options to enable interactivity and notification of your posts. This section hosts two check boxes: Allowing Comments and Allowing Pings. If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing Pings is unchecked, no one can post pingbacks or trackbacks to this particular post.

Password Protect This Post
    Allows you to keep this particular post private so that only those with the password can read it. Be sure and write down the password and keep it in a safe place.

Post Author
    A list of all blog authors you can select from to attribute as the post author. This section only shows if you have multiple users with authoring rights in your blog. To view your list of users, see Users tab on the far right. For more information, see Users and Authors.

WordPress Admin Writing Post Advanced Panel - Bottom of Page
WordPress Admin Writing Post Advanced Panel - Bottom of Page

Note: You can set basic options for writing, such as the size of the post box, how smiley tags are converted, and other details by going to Settings > Writing. See Writing Options SubPanel.
Best Practices For Posting

You can say or show the world anything you like on your WordPress site. Here are some tips you need to know to help you write your posts in WordPress.

Practice Accessibility
    To be compliant with web standards for accessibility, be sure to include ALT and TITLE descriptions on links and images to help your users, such as <a title="WordPress Codex" href="http://codex.wordpress.org/">WordPress Codex</a>.
Use Paragraphs
    No one likes to read writing that never pauses for a line break. To break your writing up into paragraphs, use double spaces between your paragraphs. WordPress will automatically detect these and insert <p> HTML paragraph tags into your writing.
Using Headings
    If you are writing long posts, break up the sections by using headings, small titles to highlight a change of subject. In HTML, headings are set by the use of h1, h2, h3, h4, and so on. By default, most WordPress Themes use the first, second, and sometimes third heading levels within the site. You can use h4 to set your own headings. Simply type in:
    <h4>Subtitle of Section</h4>
    with double lines before and after and WordPress will make that title a headline in your post. To style the heading, add it to your style.css style sheet file. For more information on styling headings, check out Designing Headings.
Use HTML
    You don't have to use HTML when writing your posts. WordPress will automatically add it to your site, but if you do want control over different elements like boxes, headings, and other additional containers or elements, use HTML.
Spell Check and Proof
    There are spell check Plugins available, but even those can't check for everything. Some serious writers will write their posts in a text editor with spell check, check all the spelling and proof it thoroughly before copying and pasting into WordPress.
Think before you post
    Ranting on blogs is commonplace today, but take a moment and think about what you are writing. Remember, once it is out there, it can be seen by many and crawled by search engines; and taking things back is harder once it is public. Take a moment to read what you've written before hitting the Publish button. When you are ready, share it with the world.
Write about what you like
    You’ve heard this a thousand times before and it sounds too cliched, but it is true. If you force yourself to write something that you don’t really enjoy, it will show. Perhaps you might not have a specific theme for writing when you just start, but that’s ok. You’ll become more focused later. Just enjoy the experience and write what you like.
Write frequently
    Write as frequently as you can, may be even more than twice a day, but don’t let quantity get in the way of quality. Your viewers come for content, don’t give them useless stuff.
Don’t use too much slang
    Not all the readers will be from your part of the world so make sure people can understand easily.
Don't hide your emotions
    Tempting as it might be, don’t hide your real emotions. After all that is what a blog is about. If you want, you can stay anonymous and voice your feelings on whatever you are passionate about. You might have strong views on various subjects but let your readers know your passion. What is passion worth if you can’t even share it? You’ll actually love the discussions it can lead to. The discussions will broaden your own thinking and you might end up making some really good friends.
Consider your readers
    Perhaps this sounds weird, but consider who needs to know about your blog before you tell them about your new blogging hobby. Will you be able to write freely if you tell them? How much should you let your readers know about you? Is it ok if your boss or girlfriend reads your posts? If you don’t want them to read, take anonymity measures accordingly.
Make use of comments
    Comments let people share their ideas. Sometimes, they might not be good, but you can ask such people to shut up. Most of the times, they will and if they don’t you can delete their comments. Blogging like real life, can be both fun and not so fun at times. Be prepared. Also, give your people a place to contact you in private if they want to write to you.
Worry about blog design later
    Blog design matters, but only to an extent. Don’t give up on blogging just because the design isn’t coming up as you’ll like it it to be. Sooner or later, you’ll get around the design problems with ease. But continue writing. Content is what attracts your readers, not just the look of your blog.
Don’t play too safe
    Talk about the real you. Readers aren’t impressed by how big your house is, which cool club you belong to, or what the weather is in your hometown. Don’t be a bore and put a long post on how you fixed the leaking tap in minutes. Readers don’t care about braggers, they care about the real you--how you feel, what gets you excited, why you are the person you are. But if achievements are all that you can talk about, you will bore your readers.
Use pictures and videos
    They make the pages colorful and viewers get to see a little of your part of the world. They feel connected.
Keep writing
    Don’t stop blogging. If you don’t have anything to write about, chances are, you are still holding back. Let loose. Perhaps surf more blogs and maybe you’ll get an idea. You can write about your friends, complain about your boss, or simply rant about what’s gone wrong. Yet if nothing else works, just write a review on the latest movie, book, or product. Easy actually.
Save your posts
    Save your posts before you press the publish button. Anything can happen with your computer or with an internet connection. You don’t need to lose your post.

Visual Versus HTML Editor

When writing your post, you have the option of using the visual or HTML mode of the editor. The visual mode lets you see your post as is, while the HTML mode shows you the code and replaces the WYSIWYG editor buttons with quicktags. These quicktags are explained as follows.

    b - <strong></strong> HTML tag for strong emphasis of text (i.e. bold).
    i - <em></em> HTML tag for emphasis of text (i.e. italicize).
    b-quote - <blockquote></blockquote> HTML tag to distinguish quoted or cited text.
    del - <del></del> HTML tag to label text considered deleted from a post. Most browsers display as striked through text. (Assigns datetime attribute with offset from GMT (UTC))
    link - <a href="http://example.com"></a> HTML tag to create a hyperlink.
    ins - <ins></ins> HTML tag to label text considered inserted into a post. Most browsers display as underlined text. (Assigns datetime attribute with offset from GMT (UTC))
    ul - <ul></ul> HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items.
    ol - <ol></ol> HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list are typically numbered.
    li - <li></li> HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag.
    code - <code></code> HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier.
    more - <!--more--> WordPress tag that breaks a post into "teaser" and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog's home page you'll see only those first paragraphs with a hyperlink ((more...)), which when followed displays the rest of the post's content.
    page - <!--nextpage--> WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will "break" and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag.
    lookup - Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.
    Close Tags - Closes any open HTML tags left open--but pay attention to the closing tags. WordPress is not a mind reader (!), so make sure the tags enclose what you want, and in the proper way.

Workflow Note - With Quicktag buttons that insert HTML tags, you can for example click i to insert the opening <em> tag, type the text to be enclosed, and click /i or Close Tags to insert the closing tag. However, you can eliminate the need for this 'close' step by changing your workflow a bit: type your text, select the portion to be emphasized (that is, italicized), then click i and your highlighted text will be wrapped in the opening and closing tags.

The Quicktag buttons also have the accesskey JavaScript attribute set, so you may be able to use a keyboard equivalent (e.g., Alt-b for bold) to "press" the button, depending on your browser.

On Windows, IE and Firefox prior to 2.0b2 use Alt to activate accesskeys, while Firefox 2.0b2 uses Alt-Shift. On Mac OS X, Firefox uses Ctrl.

Read More

WordPress Semantics

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 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.

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, pictures, graphics, 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!

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.

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. 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.

In turn, post categories are one 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!

Finally, WordPress also offers a content management tool called a Page. 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.
Terminology Related to Design

The flexibility of WordPress is apparent when discussing terminology related to the design of a WordPress blog. 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. Template 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, Archives, and Posts by Category.

Templates and Template Tags are two of the pieces used in the composition of a WordPress Theme. A Theme is the overall design of a site and encompasses color, graphics, and text. A Theme is sometimes called the skin. With the recent advances in WordPress, Theme Development has become a hot topic. WordPress-site owners have available a long list of Themes to choose from in deciding what to present to their sites' viewers. In fact, with the use of a Theme Switcher Revisited Plugin, WordPress designers can allow their visitors to select their own Theme.

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 Codex Plugins by Category and the Plugin Official Repository; there's a Plugin to enhance virtually every aspect of WordPress.

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.

The Terminology of Help
The final set of jargon relates to helping you with WordPress. There are many 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's also interesting to know the history of the name, WordPress. The name "WordPress" was originally coined by Christine Selleck (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. It's a good name, don't you think so?

Read More

First Steps With WordPress

You've just completed the famous 5 Minute Installation of WordPress without stress or fuss. WordPress is packed with many amazing features. So now that you've got it installed, what should you do?

Let's take a step-by-step tour through your WordPress site and learn about how all the different functions work and how to make your new site your own.

During the first part of this tutorial, we ask that you don't change anything within the program, unless it is part of the tutorial. Just follow these simple steps and soon you will be changing everything.
Starting from the Top

Begin by logging into the Administration Panel. This is the brain behind your website, the place where you can let your creativity explode, writing brilliant prose and designing the best and most lovely website possible. This is where the organization of your site begins - and this is just the start.

From the Administration Panel, from the top of the screen menu choose View Site. Like it? Don't like it? Doesn't matter, just look at it. This is where you are going to be spending a lot of time over the next few minutes, hours, weeks, months....
Test Driving Your WordPress Site

Take time to look at the site before you get into the changing of things and figuring out how all of this works; it's important to see how the default WordPress Theme is laid out and works. Consider this the test drive before you start adding on all the special features.

The layout you are looking at is called a Theme. It is the Presentation of your website, styling the look of the site. The default WordPress Theme features a blue "header" at the top with the title placeholder of your site. Along the side you will see some titles and links. This is your "sidebar menu." Within the main middle section of the page is the "post." At the bottom of the page is the "footer."

Let's look at the post for a moment. There is a title, and below the title is some information. This is called the post meta data and contains information about the post such as the date and time the post was made, the author, and the categories the post is in.

Scroll down the page and notice the bar at the end of the page. This is called the "footer," and for now it says "(your blog) is proudly powered by WordPress."

Back to the sidebar, you will see different sections with information. Among these you may find a list of Pages, Categories, Archives, Calendar, and Dates. This is part of the menu or navigation panel that people will use to move around your site, visiting posts from different categories or time periods.
It's All in the Details

Take time to notice the smaller details of this web page layout and design. Move your mouse over the title of the article post. Notice how it changes color. This is called a hover. Most Themes feature a distinctive color or change when you move your mouse over a link. Move your mouse over any of the links in the sidebar. Do they change? Is the change the same? You can change your link hovers to look different in different sections of your page, but typically they should be uniform. Also look at the color of the links. How are they colored to stand out from the rest of the text?

Observe the small design details and where they are placed within the page. In the near future, you may want to change some of these details, such as the color of the title in the blue box at the top of the page. If you remember that is called the header then you will know to look within the header section of your style sheet, the file that controls the look of your web page, when you want to make changes to it.Take a Quick Trip Around


For now you only have one post. It is residing within a page that is laid out as your home page or the front page. If you click on the title of the post, it will take you to the specific page for that post. The first page or home page of your site features the most recent posts on your site. Each post title will link to the actual page of the post. Some Theme designers design their single post pages to look different from the home page. By clicking on the title, you are taken to another web page that looks different from the home page.
WordPress Default Theme - Single Post Look
WordPress Default Theme - Single Post Look

Again, in the single post, pay attention to the layout and notice what is now different about the design elements. Is the header different? Smaller, larger, or a different color? Is there a sidebar? In the default Theme for WordPress, the sidebar disappears in the single post. Look at all the details and take note of the differences.

Posts are usually stored in categories so you can keep related topics together. Right now you only have one category, but will soon want more. Click on the single category that appears in the sidebar of the home page. You are now in a page that has been generated to display only the posts within that category. Again, take a look at the layout and see how it may be different from the home page and the single post.

Do the same with the Archives. You may only have one post, but look at how the pages are laid out. They may or may not change, but look at all of it to see how it all works.

All of these changes are created from only a few files called template files and you can learn more about how they work in Stepping Into Templates. For now, however, let's get on with how the rest of WordPress works.
Test Drive the WordPress Admin Panels
WordPress Admin Dashboard
WordPress Admin Dashboard

Now that you have an idea of how your site looks and what the different layout sections are called, it's time to test drive the WordPress Administration. This is like familiarizing yourself with the dashboard of your new website. In fact, the first page you see after logging in is called The Dashboard.

The Dashboard is a new feature in WordPress v1.5. It helps to keep you up to date on new and interesting bits of information from the many WordPress resources. In the corner it also features a list of the most recent activity you've done on your site.

Across the top of the Admin screen is the main menu, which says:

    Dashboard
    Write
    Manage
    Links
    Presentation
    Plugins
    Users
    Options
    Logout (name)

User Profile Panel
User Profile Panel

The links in the above list will take you to a series of articles that will guide you step-by-step through every aspect of the Admin panels. You're anxious to get started, so for now, let's start with the Users panel.

Click on the Users tab. The screen will change and you will see the panel called Profile. This is where you will enter information about you, the author and administrator of the site. In the next tab called Authors and Users you can set up more authors. Let's stick with you for right now. Fill in the information and click Update Profile when done.

Now, let's look at the powerful feature functions of the WordPress Admin.
Quick Changing the Look

The Presentation panel allows you to change the look of your site using Themes. Themes are presentation styles that completely change the look of your site. Designed by WordPress users, there are hundreds of themes available for you to choose from. In your Presentation panel, you will see two themes, classic and default. To try this quick-change process, simply select Classic and then click View Site to see how it looks. Wow, you have another look and nothing else on the site has changed. It's that easy.

Go back to the Presentation panel (Back button on your browser) and select Default to bring the design back to what you had. To see it again, click View Site, and there it is. Honestly, it is that simple.
Writing and Managing Posts

Back in the Admin panel, take a look at the Write panel, and the Manage panel. You can use the tabs under the Write Menu to write posts and Pages. Using the tabs under the Manage menu, you can manage the posts and Pages in your site.

Let's start by making your first test post in the Write Post tab.

If the screen looks a little intimidating, the Codex article on Writing a Post will take you step-by-step through the process of writing a post. Take a moment to read through the article and post your first entry and then return to this article and we'll take you onto the next step.

If you are in a hurry, then simply fill in the blanks, one by one, in the post beginning with the title and then write a little test message in the post window. This is just for a test, so you can write anything you want. When you are done, click PUBLISH below the post entry window and it is done. You will then see a blank Write a Post screen and you're ready to write another one. Go ahead. But do only three to four entries. We have more exciting work ahead of us.

Now that you've gotten a feel for writing posts, you can view your posts by clicking View Site at the top of the screen. Now it's time to get down to the real work.
Planning Session

All good websites come from a good plan. Sounds redundant, but it's true. If you want to create a good and solid website, you need a good and solid plan. I know it's hard to do, and I know you want to keep poking and playing with this exciting program, but it is time to take a break away from your computer and turn to the old paper and pen. That's right, we're going back in time to when people actually wrote things down.

On a piece of notebook paper, or whatever is lying around, describe your site. Take five to twenty minutes to come up with a purpose for your site, or better yet, call it your Mission Statement.

Answer the following questions:

    What am I going to do with this?
    Who is going to read this?
    What kinds of information will I be posting?
    Why am I doing this?
    Who am I doing this for?
    How often am I going to be posting and adding information?

Now, compile this information into a paragraph so it looks like this:
This website will be dedicated to X, Y, and Z,

and cover the topics of A, B, and C. The audience will

be __________ ________________ _______. I will be adding

posts every _____________ about ________ _______ ______________.

I am doing this because _____________ _____________ __________________.


Using the Information

From this exercise, we've gathered a lot of information. We've uncovered information on how you might layout and design your site. If you know your audience is mostly made up of young people under the age of 25, you will probably want a fashionable look ranging from wild colors and crazy graphics to dark foreboding tones. Something appropriate for that generation. If you are providing factual information about a serious subject, then you will probably want a more conservative look where the information is more important than a lot of pop and flash.

You probably already have a design idea in mind, or you will be copying over from your previous site, but take a moment to use this information to reconsider your design, and to see how what you want will work with the WordPress options.

You have also uncovered the possible categories for your site. The topics and subjects you will be covering are listed in your purpose statement. Let's say your purpose statement said,

            "The website will be dedicated to providing news and information on computers, web pages, and the Internet and cover the topics of computer tips, web page design, and Internet news."

Your topics are your categories. Write your categories down below your purpose paragraph and notes about your web page design.

Now, what subcategories might be under these topics? Under Computer Tips, you might want to segregate them by Windows, Linux, and Mac. Or maybe Software and Hardware. You can have sub-sub-categories, but let's stop with subcategories for right now. Write these down.

Remember the question about why you are doing this? Is it because you have valuable and timely information or knowledge to share, because you want to talk about a subject that interests you, or maybe because you just think it will be fun to do. Why not? Everyone's doing it!

Understanding the timeliness of the information you want to present on your site helps you organize the information on your website. Your website is organized by several different methods. If the date of when you posted the information is critical to the success of the page, then having links to your posts referenced by date is important. If the information itself is more important and timeless, then having your posts referenced by category is the best choice.

Have you noticed that you are starting to lay out your website? If you remember our earlier test drive of your new WordPress website, we examined the sidebar menu. This is the area where your past posts are organized. If you take another look (yes, you can go back to your computer for a moment), you will see the sidebar is laid out in a list by Archives by date, Categories by category, and may even feature a calendar (turned off in the Default Theme but visible in the Classic Theme).

As you lay out your website on paper, consider whether you want both categories and dates, or just one of them in your sidebar. What information you have and how you want to help the user find the information is critical to your website design.
What Information Do You Want to Share

As you think about what information the user will need to know, you have to consider what information you are willing to share with them. That information may include how to contact you, what the purpose of the site is, who you are, and what your expertise is.

WordPress v1.5 offers a new feature called Pages which makes the process of presenting this information in an easier fashion. Pages, similar to posts, are most commonly used to present unchanging information such as Pages for About Us, Contact Us, Sign Up for Our Mailing List, and other static information. Before creating your individual Pages, you need to think about what information you would like the Page to hold. Write down the possible Page titles and describe the information you are willing to share online on each Page.
Comments

Part of the fun of WordPress is the ability to have viewers leave comments on your site. It creates a dynamic interchange between you and the viewer. Do you want comments on your posts? Comments on posts come in a variety of forums, from pats on the back (Good job! Like the post!) to extensive conversations and commentary about the posts turning into long chats. Or maybe you are seeking comments that add to the information you've posted. How you present your comment form, and whether you do or not, invites people to comment.

Responding to comments and moderating them can also take up a lot of time. If they are critical to your site, then include them and consider how you want them presented. Go back to your test site; the first post created at the time of installation includes a sample comment. You can even make a few comments yourself on the posts you created. Take a look at how they are laid out and consider how you might want them to look to fit into the design and layout of your site.

When you have reached your decision about how you want to handle comments, take time to read through the article on comments and WordPress discussion options to help you set those features.

With this basic information, you are ready to return to your computer and start laying out your site and setting it up.
Setting Your Site Up

Before you get to the graphic look of your site, let's do a little more administration to your site to set it up. Consider making your first plugin installation the Codex and Forum Searcher Plugin. It allows you to search both the WordPress Codex and WordPress Support Forum from your WordPress Administration Panels. Click on one of the search results and the page will open in a new window or tab so you can have the article or discussion open while working on WordPress. This will make your transition to WordPress a much gentler one with information right at your fingertips.

You can also work from this page by clicking on a link with a Right Click and opening the documents in a new window or tab, so you can read along as you work on your site.

Let's start with making those categories written down on your list.
In the Manage > Categories tab, click Add Category and fill in the information about your category. Continue to add your parent categories, going down the list. Hold off on entering sub-categories until all the main categories are entered.

        NOTE: You can add any new categories any time, but make a note of the fact that categories can be sorted in WordPress in two ways: by name (alphabetically) or by ID number. As you enter the categories, they are assigned an ID number. It is difficult to change this, so if you don't want your categories sorted alphabetically, enter them in the order you want to see them presented on the screen.


When you have the parent categories entered, enter your sub-categories. In the pull down menu for Parent Category, you can select the parent to the sub-category you are adding. When you view your categories in the Manage > Categories panel, you will see the categories listed like this:

Computer Tips

    - Windows
    - Linux
    - Mac

Internet News
Web Page Design
    - Web Standards
    - WordPress

        - - Plugins
        - - Themes

Put Posts in Categories

• Let's put some of your test posts into categories so you can see how this works.
• WordPress Admin Manage Posts
• WordPress Admin Manage Posts

From the Manage > Category panel, click on the tab for Posts. You should see the test posts you entered here. To the right are three links that say: View - Edit - Delete. Click on Edit to edit one of the posts. On the right side of the Edit Post screen you will now see your Categories. Choose one of them by clicking in the box next to it. Then scroll down the page and click SAVE. Repeat this for your other test posts, putting each one in a different category.

Now view your page by clicking View Site at the top of the Admin panel. Do you see the categories listed in the sidebar now? Great. If you are missing a category, that usually means that there are no posts in it. This is the default function of WordPress, so not to worry. When you add a post to the "missing" category, it will appear on your web pages. Click on one of the categories and you will be taken to a page for just that category. You should see the posts that went into that category. This is a generated Category page.

Now, click on the Archives for the month showing. Now you are visiting a generated page of your posts listed in chronological order for this month - well, specifically for today only. Two methods of finding the same information.
Preventing Spam

There is more to think about when it comes to having comments on your site. Unfortunately we live in a world where spam is a fact of life. It is recommended that you begin battling the comment spammers with the helpful article, Introduction to Dealing with Comment Spam.
What is Next

You've now done all the basics for your new WordPress website. You know how to write a post, create a category, and how to view your site's information by category and archive. You can start the customization process, and when you are done, don't forget to delete your test posts! Then start writing some wonderful information to share with your new-found public!
Customizing Your WordPress Site

Once you are familiar with how WordPress works, it's time to get creative and start customizing. The tutorial now splits into different subjects that require no order. From here on you can do whatever you want, adding and subtracting, perfecting and scrambling your site at will. The amount of effort you put into the site is now up to you. You can work with the two WordPress Themes that came with the installation, or seek out another Theme that better meets your needs. You can totally customize all the links and information, or get serious and completely re-design the entire site to do whatever you want. You have the basics, the rest is up to your imagination.

Finding a WordPress Theme
    Look for one that better suits the look you desire on your site.

Customizing the Look
    When you are ready to plunge into the code, you can customize the look and layout of the site through CSS and modifing the Themes (or create your own).

Enhance Your Site with Plugins
    Plugins add function and sometimes fun to your site. There are hundreds of different plugins from adding custom links like related articles to your sidebar to adding weather reports.

WordPress Themes
There are hundreds of WordPress Themes to choose from. All do basically the same thing but graphically present the information in a myriad of ways. Choose a few that look interesting to you, and meet your audience's needs and your desires, and then test drive them following the test drive instructions above. Click through the whole site, the categories and archives as well as the individual posts to see how the Theme handles each one. The look may be nice on the front page, but if it handles things in a way you don't like on the single post, then you will have to dig into the code and make changes. Not ready for that, try another theme.

If you run into problems, check out the Codex's Troubleshooting Themes article.
Customizing The Look

If you are familiar with CSS, HTML, and even PHP and MySQL, consider customizing the Theme to your own needs. This is not for the timid, and it is for the informed and experienced. If you want to expand your web page design and development skills, WordPress can help:

•     Using Themes
•     Theme Development
•     Stepping Into Templates
•     Templates Files
•     Blog Design and Layout
•     CSS Overview, Tips, Techniques, and Resources
•     FAQ - WordPress Layout
•     Stepping Into Template Tags
•     Template Tags
•     CSS Troubleshooting
•     CSS Fixing Browser Bugs

WordPress Plugins
Plugin Panel
Plugin Panel

WordPress Plugins are also known as add-ons or extensions. They are software scripts that add functions and events to your website. They cover the gamut from up-to-date weather reports to simple organization of your posts and categories. Plugins are designed by volunteer contributors and enthusiasts who like challenges and problem solving. They are usually fairly simple to install through the WordPress Admin Plugin panel, just follow the instructions provided by the plugin author. Remember, these are free and non-essential. If you have any problems with plugins, contact the plugin author's website or plugin source first, then search the Internet for help with that specific plugin, and if you haven't found a solution, then visit the WordPress forums for more help.

•     WordPress Plugin Repository
•     WordPress Plugins
•     Managing Plugins
•     Plugins

Above and Beyond the Basics

The exciting thing about WordPress is that there are few limits. Thousands of people are using WordPress for blogging and for running their websites. All have a different look and different functions on their sites.

Read More