When you install WordPress, a number of files are uploaded to your server. The good news is that you don't need to do anything to these files; in fact, you shouldn't. If you edit these files (referred to as the core files), any changes you make will be lost when you install the next WordPress update.

Later in this chapter, you'll learn how to install WordPress. Once you've done that, you can ignore the core files. Phew!

The next set of files is stored in the wp-content directory, inside your WordPress installation. This directory will normally look similar to this:

Fig 1.1: The wp-content directory

Let's take a look at the file types:

Sometimes, your wp-content directory will have some extra folders, for example, if a plugin adds one. Don't worry if that happens, just leave them alone!

The final piece in the jigsaw is the database. This is where all of your content is stored—your posts, pages, and any settings you've made on your site.

The main benefit of using a database is that it keeps your content and your design separate. As your site grows, this makes your life much easier because you don't have to directly edit HTML files if you want to make changes to your site. The parts of each page that are the same across the site (for example, the header, footer, and sidebars) are kept separate from content, meaning if you want to change them you only have to do it once.

Everything you may need to do with your WordPress site can be done via the WordPress administration screens; you never need to touch the code. If you're not a techie, this will be a very good news!

If your hosting provider gives you access to an installer, it will probably be accessible via your hosting dashboard or cPanel, which is a dashboard many hosting providers give you to manage your site.

My hosting provider includes a link in its control panel called Web Apps. Yours might be called Fantastico, Softaculous, or something else. If you're unsure, check with your hosting company and ask them if they provide a WordPress installer.

Fig 1.2: Accessing an installer

When I open this, I see a list of the web apps available to me, including WordPress:

Fig 1.3: Choosing WordPress in the installer

These are the steps you need to follow now:

Here, you can see an example for the installation I'm setting up:

Fig 1.4: Enter your site details

Once you've entered your details, click on Install and the installer will do its work. You will see a screen with a link to your new site and to the admin screens. Well done!

But what do you do if your hosting provider doesn't give you access to an installer? That's where manual installation comes in.

Installing WordPress manually takes a little longer, but isn't difficult as long as you know the steps to take. You'll need to learn how to do this if your hosting company doesn't provide an installer or if you want to install WordPress locally on your PC or Mac. This can be useful for working on a development site, where you're creating a dummy version of the site before you launch it to the world.

Installing WordPress manually consists of four steps:

Let's work through each of those steps in turn.

The WordPress Dashboard and administration screens

Now that you've installed WordPress (whichever method you used) and logged in, you'll see the Dashboard screen. If you can see this screen, you've done everything correctly. Well done!

Fig 1.9: The main Dashboard screen in WordPress

But before you start configuring your site and adding content to it, let's take a moment to look at how this affects your old site.

In the previous section, I mentioned installing WordPress in a subdirectory if you have an existing static site that you want to keep live while you create your new one.

Let's look at how this works:

The WordPress theme repository, at https://wordpress.org/themes/, contains thousands of themes that you can download for free and use on your site. They vary hugely in terms of their design and the kind of sites they're suited to, but there's a good chance that there'll be one that works for you.

To install a theme, you don't have to go to the WordPress site and manually download it; instead, you can use the theme's screen in your WordPress admin, which you'll learn next.

With so many themes to choose from, where do you start? The first thing is to identify a set of keywords to use for searching that may include one or more of the following:

Let's try finding a theme by following these steps:

Next, we'll learn how to customize a theme for our own needs and change its settings.

The theme customizer is a great WordPress feature that lets you make tweaks to a theme and see what difference they make without saving your changes, so it won't be visible to anyone visiting your site until you're ready.

Different themes offer different customization options, which vary from just editing the title and description to more comprehensive options such as customizing colors and layout. You can also edit widgets from the customizer.

I'm going to use a theme called Pinboard, which is responsive for mobile devices and offers the option to customize colors and the header and background image. This means I can create a bespoke site meeting my needs.

To install the theme and customize it, follow these steps:

We're not going to edit any more using the theme customizer because this theme has extensive options screens, which let us do more. Some themes have more options in the theme customizer and don't use separate options screens; it all depends on the way the theme has been designed.

Let's take a quick look at how the site is looking with this theme. To view your site, click on the link in the admin bar at the top of the screen with the title of your site; in my case, it's WordPress Blueprints.

Here's the site:

Fig 1.13: The site with the Pinboard theme activated

This theme has multiple options screens, which we can use to make more changes. Not all themes will have these; it depends on the features that the developer has added.

WordPress uses three main content types:

You can also add your own content types using Custom Post Types, but we don't need to worry about that in this chapter.

There are three ways of importing content:

Let's start with the importer. This won't help you if your old site was built on HTML alone, but will be useful if you were using another CMS or blogging platform.

The importer tool automatically imports content from a range of other services. Perform the following steps:

There are two ways to do this—you can copy the text or the code. Copying the text will be easier if you're not used to working with code, but it may be less reliable.

Once you've imported the content from your old site (or if you don't want to do that), you can start creating new pages and posts. To create new pages, simply follow the steps described for copying text from your old site in the preceding section, but instead of copying in the text, type it in manually.

To create a new post, follow these steps:

The easiest way to add images and other media is to add them inside your posts or pages. Let's start with images.

Adding PDF files to your posts and pages

Adding PDF files is similar to adding images, with some minor differences. Perform these steps:

1. Open your post or page and click on the point in the text where you want the PDF to appear.
2. Click on the Add Media button and then Select Files.
3. Select the file you want to upload. WordPress will upload it and display an icon for it on the screen:
   

   Fig 1.18: The Insert Media screen

4. Complete the options on the right-hand side:
   • URL: Leave this as it is.
   • Title: This is the text that people will click on to download the file. Change this to something that makes sense for visitors.
   • Caption: Leave this blank.
   • Description: Add something here for SEO if you wish.
   • Link To: Choose whether to link to the file itself (my preference) or to an attachment page with the media file in it. I don't like this as it makes the visitor click too many times.
5. Click on Insert into page.

To test what you've done, click on the Update button and then the View page link. My page now has a clickable link to a file:

Fig 1.19: My page with an image and a media file

Now, you can repeat this with all of the images and files you want to add to your site.

Note

WordPress also supports video uploads and streaming videos from other sites. You'll learn about this in Chapter 5, Creating a Video Streaming Site.

You can use the Menus screen to create one or more navigation menus; sometimes, you might want to add extra smaller menus to your footer, for example, to display links to the popular content. But here, we'll create the main navigation menu by performing these steps:

Now let's add some widgets. Each theme will have different widget areas, which is where you place your widgets. Normally, you'll find widget areas in the sidebar and footer, but this theme has extra ones, giving more flexibility. Perform these steps:

Here are my widgets displayed in the Widgets screen:

Fig 1.21: The populated Widgets screen

Here they are on my site's home page:

Fig 1.22: The home screen with widgets