Basics of WordPress Site Design
http://codex.wordpress.org/Blog_Design_and_Layout
Now What?
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.
View Site Link
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.
WordPress Default Theme - Kubrick
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
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.
