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

How to create a simple WordPress theme

To start construction your theme, first conceive a sub-folder in the wp-content/themes book or directions in your WordPress folder. For the purpose of this tutorial, we will call the folder "tutorial_theme". The title of the folder should correspond to the title of the theme you desire to conceive. To do this you can use either your very popular FTP client or the File supervisor device in your cPanel.

Before you start conceiving the theme, you should conclude how the layout of your website will gaze like. In this tutorial we will construct a WordPress topic that comprise of a header, sidebar, content locality and a footer ,as shown below:

To do this we will have to create the following files into the tutorial_theme directory:

• header.php - This file will contain the code for the header section of the theme;
• index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
• sidebar.php - This file will contain the information about the sidebar;
• footer.php - This file will handle your footer;
• style.css - This file will handle the styling of your new theme; 

You can either create those documents locally with a simple text editor(like notepad for demonstration) and upload them via FTP or you can use the document Manager device in your cPanel to conceive the documents directly on your hosting account.

Now let's take a nearer gaze at each file and what it should comprise:
The header.php document

In this document you should add the following code: 

The header.php file

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
    </div>

Fundamentally, this is easy HTML cipher with a lone line encompassing a php cipher and a benchmark WordPress function. In this document you can specify your meta tags such as the title of your website, meta recount and the keywords for your sheet.

Right after the title the line we add <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> tells WordPress to load the style.css file. It will handle the styling of your website. The <?php bloginfo('stylesheet_url'); ?> part of the line is a WordPress function that actually loads the stylesheet file.

Next, we have supplemented the beginning of a "div" with class wrapper which will be the main container of the website. We have set class for it so we can change it via the style.css document.

After that we have supplemented a easy label HEADER covered in a "div" with class "header" which will be subsequent specified in the stylesheet file.

The index.php file

<?php get_header(); ?>
   
<div id="main">
  <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  </div>

  <?php get_sidebar(); ?>

  </div>

<div id="delimiter"></div>

<?php get_footer(); ?>


The code in this file begins with <?php get_header(); ?> which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line - <?php get_sidebar(); ?>. In this file you can display your post categories, archives etc.
After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line - <?php get_footer(); ?> which will include the footer.php file in your page.

 The sidebar.php file

<div id="sidebar">
  <h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
 
  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
</div>


In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).

The footer.php file

<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

Add the following lines to the style.css file:

body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto;
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}

HEADER

Read More

How to install a Wordpress theme

In the default WordPress setting up, there are a twosome of topics you can select from. You can find the topics in your WordPress administration locality > Appearance > Themes.

You can change the topic easily by clicking on the desired topic and then Activate "theme name".

How to install a WordPress theme?
If you would like to use a distinct WordPress topic for your blog web location, first of all you will have to download it to your local appliance. You can visit our Wordpress topics gallery and download free topics from there:

Once you have the new Wordpress theme on your localizedized hard propel, you have to upload it under the 'wp-content/themes' directory of your website. You have two choices to do that:

You can upload the .zip file of the topic in the 'wp-content/themes' book or directions by the document Manager and extract it online, or
Extract the document in your computer and then to upload the content in the desired folder via FTP.

Now, that you have the new topic uploaded on your site in the right folder, you can glimpse it in your WP admin section and choose it as a default theme for your site.

Read More

How to Create a WordPress Theme from Scratch

Setting Up the Work Station
To get started with this tutorial we should set up a server on our computer using either XAMPP or WAMP (usually if employed on a PC), or MAMP if you are working on a Mac. All of these tools permit for a local checking natural natural natural environment for WordPress and can make it so that you don't have to certainly move documents through FTP while employed on a task.

In periods of cipher revising I would highly suggest Notepad++. With syntax highlighting, and an very simple and clean user interface for coding, I would have to state it is my personal favorite (plus, you can't trounce free), but Notepad or Notepad 2 furthermore work as well.

Getting the essential Folders and documents prepared
In the folder containing your WordPress setting up, proceed to wp-content/themes/ and conceive a folder entitled “New 3.0 Theme”. This is where we will contain all of our documents during this tutorial. Now create the following documents and folders:

/images

style.css

header.php

index.php

single.php

footer.php

archive.php

page.php

sidebar.php

functions.php

Style.css
The style.css will comprise all of the components that style our WordPress template. First though. we will use it to affirm the name of our template as well as the scribe name and link, and recount and type. Now remember when conceiving a WordPress topic, the style.css is one of the two files needed to make the theme work, and the other, which we will be conceiving subsequent, is the index.php.

/*

Theme Name: New WP Theme

Theme URI: http://wordpress.org

Description: A clean and minimal theme that is completely compatible with

Author: Hasibul Islam

Author URI: http://www.webdeveloperszone.com

Version: 1.0

*/

All of this information can be changed at anytime, but it is important that it is all contained within the comments so that it doesn't affect any of the definitions created.

Now we will create some basic definitions that we will later implement in some of the template's PHP files.

body{  

    font-family: Arial, Helvetica, Georgia, Sans-serif;

    font-size: 12px;

    background: #d9d9d9;

    color: #000000;

}

a:link, a:visited{

    text-decoration: none;

    color: #000000;

}

a:hover{

    color: #5f5f5f;

}

h1 {

    font-size: 54px;

}

h3 {

    font-size: 24px;

}

#wrapper{

    margin: 0 auto;

    width: 750px;

    text-align: left;

    background: #fff;

    padding: 20px;

     

}

#header{

    width: 750px;

    height: 100px;

}

#blog{

    float: left;

    width: 520px;

    padding: 0 10px 10px 10px;

}

.sidebar{

    float: left;

    width: 200px;

    margin: 0 0 0 10px;

    font-size: 14px;

    list-style: none;

}

#footer{

    clear: both;

    text-align: center;

    height: 50px;

    background: #ccc;

    padding: 10px;

}

The tag is just utilised to affirm the specifications for fonts utilised on the website, as well as the background color (this can be altered to your own liking). We then affirm the style attributes for connections as well as some of the headers that we will be utilising throughout our theme.

The #wrapper is going to be the full size of the web page, with #header obviously being the header, and #blog encompassing just the latest blog posts on the location. finally we have .sidebar and #footer which will both just comprise the basic delineations for those granted areas, which we will get into more deepness about later.

Header.php

Next we will create the header.php, which at the moment will contain our website logo, as well as our custom navigation.

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php wp_title ( '|', true,'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php

    /*

     *  Add this to support sites with sites with threaded comments enabled.

     */

    if ( is_singular() && get_option( 'thread_comments' ) )

        wp_enqueue_script( 'comment-reply' );

    wp_head();

     

    wp_get_archives('type=monthly&format=link');

?>

</head>

<body>

<div id="wrapper">

    <div id="header">

        <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>

    </div>

All of this cipher doesn't actually need to be explained in much deepness, but just recall that the above code should be in the header.php of all of your themes. First we declare the doctype, as well as use the benchmark that will be utilised to show the name of your website as you kind it in your WordPress settings, and then your style.css and the PHP code that will endow WordPress 3.0's threaded comments.

supplementing Custom Navigation
Now that we have coded up our header.php with our rudimentary data and our blog's title, we can add our custom navigation list, a characteristic that was introduced in WordPress 3.0. Before we actually add the cipher to our header.php though, we have to first open up the functions.php, and add the essential code to endow the made-to-order menus.

<?php

//Add support for WordPress 3.0's custom menus

add_action( 'init', 'register_my_menu' );

//Register area for custom menu

function register_my_menu() {

    register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );

}

?>

As you can see by the commented parts of the code, the first part, with add_action is utilised to add support for custom meal lists, and next we register a custom list and title it “Primary Menu”. Now, we will move on to implementing the list into our topic.

To do this, we will have to add this line of code below at the end of our header.php document.

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

Now on to comprehending precisely what this means. The primary function that is being utilised is wp_nav_menu, with sort_column, container_class, and theme_location as the contentions being used. What sort_column does is makes certain that the alignment you pick in your WordPress dashboard is followed. container_class will allow for you to select the CSS class that you have conceived to be utilised to method your list. Lastly, theme_location just assigns the list to while we select, which at the moment happens to be primary-menu.

Styling the Navigation
We have our made-to-order header navigation up and running, but at the moment it just looks like a dull old register of connections that regrettably, are aesthetically unappealing. To rectify this, we will conceive a class called nav in our style.css.

.nav{

    width:750px;

    background: #000;

    display:block;

    float:left;

    position:relative;

}

.nav ul{

    list-style:none;

}

.nav li{

    float:left;

    position:relative;

}

As you can glimpse in our .nav we have made some rudimentary affirmations, such as the breadth of the navigation, backdrop, where it will align, as well as the display worth. Next we method the rudimentary unordered register by just making certain that no projectiles are shown with our links. For our register we ride high the pieces to the left, as well as place it relative.

Now we will complete the styling of our navigation by supplementing styles to the links and dropdown menus.

.nav a{

    display:block;

    text-decoration:none;

    color:#fff;

    padding:0 15px 10px 0;

    font-size:13px;

    font-weight:bold;

}

.nav ul ul{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    float:left;

    z-index:99999;

    background: #212121;

}

.nav ul ul ul{

    top: 30%;

    left:100%;

    background: #343434;

}

.nav ul ul a{

    height:auto;

    line-height:1em;

    padding:10px;

    width:130px;

}

.nav li:hover > a,.nav ul ul:hover > a{

    color:#ccc;

}

.nav ul li:hover > ul{

    display:block;

}

As you can glimpse we start by fashioning our links for the list, and now we get into fashioning our drop-down meal lists. In .nav ul ul we set the position to unconditional, and put the top house to 100%, so that it is exactly under it's parent link. We also altered the backdrop to make the drop-down connection stand out a little bit, as well as set our z-index to 99999 so that no issue what's underneath it or in the menu's way, it will habitually stay on top of all other components.

For that third drop-down list, we have changed the backdrop hue afresh just slightly so that it stands out, as well as made left 100% so that it is all the way right of our first drop-down, and set the peak to 30% so that it is still adhered to that second drop-down, but is divided from the entire list.

finally we method the links for our drop-down menus, as well as the what our navigation will gaze like when a user hovers over a granted connection and its drop-down.

Index.php
The index.php will be the home sheet of our website, and will comprise cipher to encompass our header, footer, and sidebar, which I will interpret underneath, as well as the cipher to encompass the most latest mails from our blog and take benefit of WordPress 3.0's mail thumbnails feature.

<?php get_header(); ?>

    <div id="blog">

        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

         

        <div class="post">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

         

            <div class="entry">  

                <?php the_post_thumbnail(); ?>

                <?php the_content(); ?>

                <p class="postmetadata">

                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />

                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>

                </p>

            </div>

        </div>

<?php endwhile; ?>

         

        <div class="navigation">

        <?php posts_nav_link(); ?>

        </div>

         

        <?php endif; ?>

    </div>

<?php get_sidebar(); ?>  

<?php get_footer(); ?>

These lines of code are used to output all of the information in the header.php, sidebar.php, and footer.php wherever you place them in your theme files.

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Other than that, the cipher here is attractive easy to realise. After we call the header.php, we use our #blog that we created just a little bit before, and we call the loop that will be utilised to bring up the newest posts on our WordPress blog. After that we cover the name of our posts in

, which we also styled earlier.

The one part of cipher here that displays how we're going to be taking advantage of WordPress 3.0's post-thumbnail feature is the . As it stands, this code won't do anything, until we cause the feature in our functions.php which we will do in the next step.

Enabling Post Thumbnails
We have supplemented our cipher to display the mail thumbnails on the homepage, but at the instant nothing happens as we have not really endowed the characteristic to work. Now open up the functions.php that we worked on before, and the underneath code should be supplemented after your list navigation code.

// Enable post thumbnails

add_theme_support('post-thumbnails');

set_post_thumbnail_size(520, 250, true);

The cipher overhead is pretty self-explanatory as it magic charms out nearly precisely what it does. The second line will add the support for mail thumbnails in our topic, while the third line characterises the exact dimensions of our thumbnail, which for this item, will be set at 520 pixels for breadth, and 250 pixels for height.

Sidebar.php
The sidebar.php is, as you estimated, the document that will brandish all of the information we desire in the sidebar. Since we have currently included the document in our index.php, all we have to do is put the code in this file and our sidebar will display up on the homepage.

<div class="sidebar">

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<?php endif; ?>

</div>

Yup, that will be all of the cipher that's added to our sidebar.php to make it purposeful. We call the div that we created in our style.css, and the code underneath will make it so that we can add widgets to our sidebar in the alignment and way we want them by the WordPress backend. although, like numerous characteristics, we have to modify our functions.php document first to make this characteristic work properly.

//Some simple code for our widget-enabled sidebar

if ( function_exists('register_sidebar') )

    register_sidebar();

The code just notifies WordPress to list a sidebar which we called in our sidebar.php. WordPress can handle multiple sidebars attractive effortlessly if you want more than one, but for the sake of holding this already-long tutorial relatively short, we'll let Google answer the inquiry on how to do that for you.

Single.php
The single.php is what will be utilised for a single mail sheet, and most of the cipher should look pretty alike since we've already coded up our index.php. Really the only thing that's distinct is that we have added in our comments-template div, and the cipher to include the comments.php.

<?php get_header(); ?>

    <div id="blog">

        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

         

        <div class="post">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <div class="entry">  

                <?php the_post_thumbnail(); ?>

                <?php the_content(); ?>

                <p class="postmetadata">

                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />

                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>

                </p>

            </div>

            <div class="comments-template">

                <?php comments_template(); ?>

            </div>

    </div>

<?php endwhile; ?>

     

    <div class="navigation"> 

        <?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>

    </div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>  

<?php get_footer(); ?>

Comments.php

With the release of WordPress 3.0 has meant the standardizing of comments forms throughout all WordPress themes making it easier for theme authors to and plugin developers since the comments form can be modified via hooks.

Below will be the code you will want to put in your comments.php file in your theme template.

<?php comment_form(); ?>

This will brandish a remarks form that examines well on our theme, but if you would like to discover more about customization of the commentary pattern, you might desire to ascertain out WordPress 3.0 topic Tip the Comment pattern.

Page.php
When you conceive a sheet in WordPress, a distinct document is used to brandish the content of what you drafted into the page, and that is page.php. The cipher will gaze almost absolutely equal to what we typed up in our single.php, except since it is a sheet we are going to omit the remarks template, and change the post navigation slightly to handle a sheet rather than of a mail. Other than that, the code will be precisely the same.

<?php get_header(); ?>

    <div id="blog">

        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

         

        <div class="post">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <div class="entry">

            <?php the_content(); ?>

                <p class="postmetadata">

                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />

                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>

                </p>

            </div>

        </div>

         

<?php endwhile; ?>

    <div class="navigation">

        <?php posts_nav_link(); ?>

    </div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>  

<?php get_footer(); ?>

Category.php
The category.php will assist as the document that, when a client examines at a specific post category, time for posts, or specific scribe, will be the document that serves up the data to display mails. As with our page.php, most of the code here is going to be the exact same as the single.php we created before, except for a chunk right at the beginning.

<?php get_header(); ?>

    <div id="blog">

        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

         

    <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

      <?php /* If this is a category archive */ if (is_category()) { ?>

        <h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>

      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>

        <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>

      <?php /* If this is a daily archive */ } elseif (is_day()) { ?>

        <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>

      <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>

        <h2>Archive for <?php the_time('F, Y'); ?>:</h2>

      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>

        <h2>Archive for <?php the_time('Y'); ?>:</h2>

      <?php /* If this is an author archive */ } elseif (is_author()) { ?>

        <h2>Author Archive</h2>

      <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>

        <h2>Blog Archives</h2>

    <?php } ?>

         

        <div class="post">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <div class="entry">

            <?php the_content(); ?>

                <p class="postmetadata">

                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />

                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>

                </p>

            </div>

        </div>

         

<?php endwhile; ?>

    <div class="navigation">

        <?php posts_nav_link(); ?>

    </div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>  

<?php get_footer(); ?>

This piece of code right here will be the only thing that is added, and we have included it right after our WordPress loop.

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

      <?php /* If this is a category archive */ if (is_category()) { ?>

        <h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>

      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>

        <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>

      <?php /* If this is a daily archive */ } elseif (is_day()) { ?>

        <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>

      <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>

        <h2>Archive for <?php the_time('F, Y'); ?>:</h2>

      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>

        <h2>Archive for <?php the_time('Y'); ?>:</h2>

      <?php /* If this is an author archive */ } elseif (is_author()) { ?>

        <h2>Author Archive</h2>

      <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>

        <h2>Blog Archives</h2>

    <?php } ?>

What this does is use a assortment of if/elseif statements in PHP to show what we are actually browsing on our blog. So if we're looking at a exact category called “Test class 1”, it will display in the h2 heading “Archive for the ‘Test Category 1’ Category:” before all mails, and it will do this for certain dates, authors, and so on.

made-to-order Backgrounds, Feed connections
As recounted before, one feature that has been applied in WordPress 3.0 is the ability to conceive or change the backdrop of your location, be it an likeness or rudimentary hue, just through the WordPress backend. All we need for this characteristic to work fully?

This one little line of code:

add_custom_background();

And like that, custom backgrounds are now enabled. Next, we are going to be adding some equally simple code to make it so that relevant feed links are available everywhere on the site. Be it the standard feed, comments, tags, categories, all of these will be added to the header without any extra code.

Let's add the following code to our functions.php, to make this feature work as it should.

add_theme_support( 'automatic-feed-links' );

Footer.php
To complete off our work here, we are going to conceive our footer.php file, which too will use the #footer that we announced in our style.css, and will just contain some rudimentary copyright data as well as a link to the tales and remarks RSS feed at the bottom.

<div id="footer">

    <p>

    <strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a>

    Designed by <a href="http://slackrmedia.com">SlackrMedia</a>

    </p>

    <p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>

    </div>

</div>

</body>

</html>

Read More