Advertisement
WP101 Training

Beginning With WordPress: First Steps With Your New Website

by

Well… would you look at at that… a whole new WordPress site! Clever you! Have you logged in yet? If so, you might be sitting looking at the Dashboard wondering what the heck you do next…  so, let me help you with that! (Failing that you're wondering what on earth a Dashboard is, that's ok, all will become clear.)

In this tutorial we're going to introduce the Dashboard and go over the first few settings you should adjust when you are setting up your site for the first time, and we'll finish today's lesson with the absolute basics on creating your first pages and posts (including a bit of a look at the differences between the two).


Before We Start

You'll need:

  • Your log in credentials for your WordPress site.

Here's an outline of what we'll be looking at today:

  1. Introducing the Dashboard
  2. Some basic general settings
  3. Mapping out your site structure
  4. Understanding posts and pages (different content types)
  5. Creating a page
  6. Creating a post
  7. Setting static pages for home and blog pages

Introducing the Dashboard

Dashboard-tut4_1

Ok, when you first log into your site you'll be redirected to the Dashboard, the basic control panel from which you will drive your site. From here there are a bunch of places you'll get familiar with fairly quickly as you begin to manage the content. One of the things you'll notice in WordPress is that there are often many ways to get to the same place, the way you use it will depend on what works for you. Let's start with a bit of a quick run through.

At the very top of the page is the Admin Bar, and as with most of WordPress, the content in this bar is context sensitive, as in, what appears in this area will depend on where you are within WordPress. If you are in the Dashboard, as we are in this first image, you'll be able to hover over the links in the admin bar and get access to the following areas:

AdminBar-tut4_3.png
  1. The WP logo shows you links to useful helps (See Fig. 2).
  2. The Site Title (in my case, "My New Website") leads to a published view of your site.
  3. Comments ready for publishing comments-tut4_2 (no comments currently requiring attention)
  4. New content / users
  5. Your own user management and log out button.

If you are elsewhere in the site, the options available in the Admin Bar will change. Here's how it looks in the front end (all the other buttons remain the same):

AdminBar_2-tut4_4

Now, rather than focus on running through the various parts of the sidebars and menus as they read from top to bottom, we're going to focus on the things that are smart to do from the get-go; things that help get your site ready for market rather than just learning how to do WordPress.

So go ahead and hit the 'Settings' link near the bottom of that sidebar menu.


Some Basic General Settings

First, let's set the date and timezone for your site.

Timezone-tut4_5

When you hit the settings page you'll see the Timezone setting halfway down. You can choose to set the timezone according to your time relative to UTC or you can can scroll up the list to find your city and set the time using that (the benefit of this is that it will change with Daylight Saving). You can see here that I've set the timezone to Melbourne - the equivalent UTC code would be +10.

Next we'll change the permalink settings. This alters the URLs on our site from the default post id (e.g ?p=123) to reflect something a bit more meaningful for both readers and for search engines. In this case we're using just the post name for our permalinks.

Permalinks-tut4_6

Now that the basics are good to go, let's look at adding content.


Mapping Out Your Site Structure

Now, one of the things I see happening with new WordPress sites is people diving in and creating pages and posts without really having any clear plan of attack, and if your site is a playful project that's about getting familiar with messing about in WordPress, well that might be fine. However, if you've got plans for your site, it is a much better practice to have a plan for your content and site structure before you dive in and create stuff willy nilly.

For this first example site, which is a personal blog site, we've a couple of different kinds of content we're going to want to use, and we've got a site structure in mind that looks something like this:

  • Home - A listing of my latest blog posts
  • About Page - Why this site exists with a short bio about the site owner
  • Contact Page - Predictably where to find me and how to get in touch

Most sites start out looking something like this and content evolves as the site does. However, the way you structure the site may well depend on how you're wanting to use it. In this case it's a personal blog for sharing thoughts, cool internet finds, favourite quotes and videos etc. But your site may be a business site and your blog may be secondary and not require a front page spot. Setting your site up for that requires a setting change, but before we go there we're going to talk about the differences between posts and pages, then you might be better placed to decide which way you're going to structure your front page.


Understanding Posts and Pages (i.e. Different Content Types)

Posts and Pages are both content types and while they have a lot of similarities there are also a few differences specific to each content type. To put it simply, the differences are not unlike different kinds of publications: Pages are like Books, Posts are like Magazines.

Enough, no?

OK, let's dig a little deeper.

Pages generally hold content that is fairly static; once you've published it, while you may wish to be able to change it, it isn't something that you're going to have to edit regularly. It isn't time sensitive and it remains in its place and usually will have a spot in your menu.

Pages are like a book on the bookshelf, their content is useful over the long term. They're unlikely to change much, or very often, and they're good to have easily accessible for reference.

Pages can also be built hierarchically in your site structure and you can apply different kinds of layout templates to them according to the templates available in your theme (and yes, this is kind of where the metaphor ends).

Sample-Page-tut4_7

Posts on the other hand are time sensitive, they may be categorised, they will also be included in your RSS feed (people may subscribe to them). They will be displayed on your blog page, or front page, in reverse chronological order and they're less likely to be needed to be included in your menu because of their more disposable nature.

See? Just like a magazine… time sensitive, usually stacked in order with the newest on the top, categorised by date and content type, and generally more interesting in the short term than the long.

Sample-Post-tut4_8

If it's easier to have a visual representation of how that looks, here's a graphic view in which you can see where there is cross over between the content types and where there are differences.

Infographic - Posts and Pages Compared - WordPress

A Comparison of Posts and Pages via Kristarella

Creating a Page

So, there are several places you can go to create a Page. You can start with the Admin bar and hit the New link up there and a list will drop down, and one of the items you can create from there is a Page. If you're in the Dashboard can also click on the Pages link in the Sidebar menu and choose the Add New page from there. OR, if you've clicked on the Pages link you may find yourself in the Pages listing section, you can see a link in the top of that which says Add New.

Add-page_1-tut4_9

Any of these links will do the same thing, open up the page editor window.

There's a lot about this window that should be reasonably sensible. If you're familiar with word processing, then the options in the edit box should be clear enough. Put your cursor into the editor section and start typing! To add a paragraph at the end of your text just hit return or enter, if you only want to drop down half a step, hit shift and enter/return to simply put in a line break.

When your content looks like you want it to then hit Publish, if you're not quite ready to publish and want save your content to come back to later then just hit the Save Draft button.

If you want to take a peek at what your page will look like when you've published it, then hit the Preview button (makes sense, right?). Go ahead and give it a whirl… I'll wait…

Add-Page-tut4_10

When you've created your About page and you're happy with that then repeat the process and create a Contact Page.

Once you've done that then head over to View Site to have a look at your new pages!

Published-Page-tut4_11

You may notice that your new pages have appeared in the menu by default and are listed in the order they're created, with the newest at the front. We'll get into how to edit and customise menus in a later tutorial, in the meantime, we're going to add a new post - and here's a secret… while there's no home button in the menu (we'll add that later) click on your site title to get back to the front page.

While you're there, click on the New button and choose Post.


Creating a Post

Most of this page should look pretty familiar, right? There are some significant differences, but the important similarities are the Editor field and the Publishing section.

Add-Post-tut4_12

The different areas allow for different kinds of Post Formats and various ways of classifying your posts according to categories. We'll break down Post Formats in the next tutorial, for now let's just focus on classifying our post. As it is at the moment the post is set to the default category of 'Uncategorized'. We'll look at how to edit that in the next tutorial as well.

But, there you go, you're now well underway for creating the basic structure and content for your website! Congratulations!!

But, you may have one more thing you're wanting to do, and it would be wrong for me to leave you hanging, what if your site's not a blog?! OK, let's look at structuring your site with a static front page.


Setting Static Pages for Home and Blog Pages

So, now you know how to create pages and posts, and you might be having thoughts about how you want your front page structured. If you're happy with having it listing your posts then you can bow out of the tutorial at this point and join us next time, but if you are wanting to know how to adjust your front page view for static page content and a separate blog page, then keep reading.

So, let's say our site structure looks less like the above and looks more like this:

  • Home - A static introductory page
  • About Page - Why this site exists with a short bio about the site owner
  • Services Page - A listing of the services I offer
  • Blog Page - A listing of my latest blog posts or news articles
  • Contact Page - Predictably where to find me and how to get in touch

In order to change where our blog listing happens and having a static page for your front page you have to actually create the static pages, and that’s easy. Following the same instructions as above, create three new pages. Call them Home, Blog, and Services just to make things easy. I haven't put any content in them, in fact, don't put anything on the blog page, but you will need to add content to the Home and Services pages when you're ready.

Pages-Listing-tut4_13

When that's done then you need to hit up the Reading Settings page - when you've found that change the radio button that's currently set to 'Your latest posts' to reflect the pages you want to become your Front Page and your Posts page. You might be able to see why we needed to create the pages first.

Reading-Setting-tut4_14

Once you've done that then hit Save Changes and hop over to your front page to see your changes in effect.

Would you look at that! Here's my static Home page with no content in it:

Homepage-tut4_15

And here's my blog page:

Blogpage-tut4_16

OK, we've got some tidying up to do. We're going to want to remove comments from static pages for a start, we're also going to want to tweak the menu, but that's enough for today. We'll get to some of those finer points of site tweaking next time!


Conclusion

Starting out your website project with a bit of a plan as to how your site's going to be structured will save a lot of long term hassle wherein you could find yourself writing and rewriting posts and pages to make the site conform to your content.

Plan first, then build your site structure according to the content type be that content fit for pages or posts or a mixture of the two.

Related Posts
  • Computer Skills
    App Training
    How to Turn Your Data Into Interactive Tables with SilkSilk preview image
    Data mining isn't just for corporations. Here's how you can use Silk to easily turn your data into interactive charts, tables, maps and more.Read More…
  • Code
    Tips
    The Beginner's Guide to Setting Static Front Pages in WordPressStaticfrontpage
    Typically, in a WordPress website, the home page shows the blogger's latest posts, but what if you wanted the homepage of your website to display the same page every time? For those of you who are just getting started with WordPress, then it's worth noting this is not only possible, but it's really easy.In this article, we'll talk about how to implement a static front page in WordPress as well as where it would and wouldn't be appropriate.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding NavigationCreating wordpress theme from html 400
    If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Business
    App Training
    How to Convert WordPress into a HelpdeskPreview supportdesk
    Questions are fantastic. Even questions from customers are great, though they can take up time to answer. Questions from our customers give us insight into what they want or need. Customer questions can help us come up with ideas for new products or services.Read More…