WordPress 4.0 Site Blueprints (Second Edition)

Chapter 1. Migrating a Static Site to WordPress

Many people come to WordPress after some experience of creating static sites using HTML and CSS; in fact, this is what happened to me. I had been building static sites for a while and wanted to start developing with content management system (CMS), which would make it easy for me to import existing static sites and update them using the CMS interface.

The great news is that WordPress makes it possible for you to do this. In this chapter, you'll learn how to move your old site to WordPress as well as gain an understanding of how WordPress works and the benefits of using it. We'll cover these topics:

The difference between a WordPress site and a static site
How WordPress is structured and how it stores your site's content and design information
How to install WordPress on your server and set it up while keeping your old site live
How to choose and install a theme
How to add content to your new WordPress site, including importing content from your old site and adding new posts and pages
Installing plugins to add extra functionality
Launching your site once it is ready

So let's get started!

Note

In this book, you'll learn how to download and activate a theme that will give your site its styling and layout. If you want to learn how to take your static site and develop your own theme-based on the code in your HTML files, I recommend WordPress Theme Development Beginner's Guide, Packt Publishing.

Understanding how WordPress stores content

Having read the list of files contained in a WordPress site, you may be feeling quite daunted! But the good news is that you don't need to think about the files I've listed here as WordPress does the thinking for you.

So, let's take a look at the contents of a WordPress site in more detail.

WordPress files

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!

Theme and plugin files and uploads

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:

themes: When you create your site, you will need to install a theme, which is what will give your site its design and layout and possibly, some extra features too, depending on the theme. There are thousands of themes available for you to download and use on your site, and a lot of them are free. WordPress stores the files for your theme in the themes folder, with each theme having its own folder. You'll never need to open these files or edit them.
plugins: These are extra packages you install in your site to add more functionality. There are thousands of plugins available, and like themes, a lot of them are free. Later in this chapter, you'll learn how to install and configure plugins on your site. Again, the good news is that you don't have to worry about these files; WordPress will do the work for you.
uploads: This folder contains all of the images and other media that you upload to your site. When you first install WordPress you might not have this folder yet, as it's automatically created the first time you upload media to your site. You don't actually upload these directly to this folder; instead, you use the WordPress interface to upload them and then WordPress stores them in the correct place for you. It is another example of WordPress making your life easier! Later in this chapter, you'll learn how to upload an image and insert it in a page on your site.

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!

Database

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!

Installing WordPress

Now that you understand how WordPress works, you're probably itching to get started! So, let's start by installing WordPress. There are two ways to do this:

Using an installer such as Softaculous or Fantastico, which may be provided by your hosting company
Directly installing WordPress using the Famous 5 Minute Install

Let's start with the easier way, which is to use an installer.

Installing WordPress using an installer

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.

Note

The exact way this looks and where you find it will vary from host to host, so your screen will probably look slightly different from what you see here, but the process is much the same.

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:

Click on WordPress and then on Install Now.
You will be presented with a list of fields to complete. Fill them out as follows:
- Prefix: I prefer to use just http:// as the www really isn't necessary these days.
- Domain: This will already be filled out with your domain name; leave it as it is.
- Directory: If you add something here, WordPress will be installed in a subdirectory of your site and not in your root directory. If you already have a static site running on this domain, using a subdirectory will mean that your static site will still work while you install and set up WordPress. If not, it's easier to leave this empty. You'll learn later in this chapter how to manage your old site while you're setting up WordPress.
- Database Name: You can leave this as it is or change it to something that's more memorable to you. If you're not going to be working on your database, just leave it alone.
- Table Prefix: Leave this as wp_.
- Site Name: This is where you enter your site's title.
- Site Description: This is where you enter your description or strapline. Most themes will display this below the title at the top of your pages. If you don't have a description, leave this blank.
- Enable Multisite: If this is offered by your installer, leave it unchecked.
- Admin Username: The default is admin, but for security reasons, you should change this to something unique and memorable for you.
- Admin Password: Enter your password twice for logging in to your site. Be sure to make it secure, including uppercase letters, numbers, and other characters.
- Admin Email: Enter your e-mail address.
- Select Language: If this is an option, select your language if it isn't English.
- Select Plugins: This isn't offered by all installers, so you may not see it. I leave this blank, preferring to install plugins later on.
- Email recipient: If you add your e-mail address here, you will receive an e-mail with details of your new WordPress installation, including a link to the admin screens.

Tip

Some installers offer a backup option, which is a good idea to select if available. It's also a good idea to use a backup plugin in your site too. For a review of some of the best backup plugins, visit http://premium.wpmudev.org/blog/premium-freemium-wordpress-backup-plugins/.

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

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.

Note

If you want to install WordPress on your local machine, the process is very similar to the one here, but you'll also need to install an app such as MAMP (for Mac and Windows) or XAMPP (for Mac, Windows, or Linux). You can find instructions at http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP and http://premium.wpmudev.org/blog/how-to-install-wordpress-locally-for-pcwindows-with-xampp/. For a guide to migrating your site to the live site once you're happy with it, refer to http://code.tutsplus.com/tutorials/migrating-a-wordpress-site-from-a-local-server-to-production--wp-26.

Installing WordPress manually consists of four steps:

Downloading the WordPress files
Creating a database on your web server
Uploading the WordPress files to your server
Running the WordPress installation script by accessing the URL for your site in your browser

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

Downloading the WordPress files

To download the WordPress files, follow these steps:

Go to https://wordpress.org/download/ and click on the Download button to download the files.
This will download a .zip file to your computer. Unzip this.

Creating a database on your server using phpMyAdmin

Your site will need a database to hold all of your content. WordPress doesn't create this for you; you'll have to do it yourself.

In your hosting provider's dashboard or in cPanel, go to phpMyAdmin. If you can't find this, ask your hosting provider; they might have a different way to create a database, such as using a wizard.
Fig 1.5: The phpMyAdmin home screen
Click on the Databases tab.
You will see a field labeled Create a new database. Type the name of your database in this field. Make a note of this as you'll need it again later.
Click on OK.

You now have an empty database set up. The next step is to upload WordPress.

Note

Some hosting providers don't let you create databases in phpMyAdmin; you have to do it in your hosting dashboard instead. If this is the case, follow the instructions given by your hosting provider.

Uploading WordPress to your server

To upload WordPress, you'll need an FTP client or a code editing program with FTP built in. I tend to use Coda (http://panic.com/coda/), which is a code editor for the Mac, or FileZilla (https://filezilla-project.org), which is a free FTP client.

In your FTP client or code editor, display your Downloads folder locally and the files on your remote server.
If you already have a static site on your server and want to keep it running while you create your new site, create a folder inside your public_html folder. I'm creating a folder called blueprints1, as you can see in the following screenshot. If you don't have an existing site, you can skip this step.
Fig 1.6: The blueprints1 folder
Now copy the contents of the wordpress folder from your Downloads folder to the folder you've created. If you haven't created a folder, copy it to the public_html folder. Don't copy the wordpress folder, copy its contents.
Make yourself a coffee while you wait for the files to upload!

Now that you have a database and the WordPress files uploaded, you just need to activate the WordPress installation script by visiting your new site's URL in your browser.

Activating the WordPress installation script

To activate the installation script, you'll need to perform the following steps in your browser:

In your browser of choice, type in the URL for your new site. Remember that if you've created a folder for your site, it will be http://yourdomain.com/folder, where folder is the name of your new folder and yourdomain.com is your domain name.
You will be presented with the first of the installation screens, where you choose your language. Select your language and click on Continue.
The next screen tells you what's coming up. Give it a quick read (and don't worry!) and click on Let's go!.
The following screen is where you need to give WordPress some information about your database so that it can access it. Input the following:
- Database Name: Enter the name you gave your database earlier
- User Name: Enter the username you created for your database earlier
- Password: Enter the password you assigned to your new username
- Database Host: Leave this as localhost (unless your hosting provider uses a different hostname)
- Table Prefix: Leave this as wp_
You can see what I've entered in the following screenshot:
Fig 1.7: Entering your database details to install WordPress
You'll now see a screen congratulating you on getting this far. Click on the Run the install button to continue.
You're nearly there! All that's left is to enter your site details on the next screen:
- Site Title: Enter the name of your site.
- Username: Enter your username for logging in to your site (which is different form your database username—don't use the same username as this will make your site less secure).
- Password twice: Enter the password you want to use to log in.
- Your Email: Enter your e-mail address for notifications.
- Privacy: Uncheck this for now as this is a development site and you don't want search engines finding it just yet. Don't forget to go back and check the box when you launch the site, otherwise you won't get picked up by Google.
Here's what I've added:
Fig 1.8: Entering information about your site
Next, you'll see the success screen. Click on the Log in button to access your new site.
Now simply log in with your username and password and you'll be able to start administering your site.

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.

Keeping your old site live while setting WordPress up

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:

You install WordPress in a subdirectory, which has a different name from any of the pages in your site (if you have an HTML file with the same name as your subdirectory, the browser might go to the WordPress installation instead of that HTML page when a link to it is clicked).
You uncheck the box, allowing search engines to index your site so that people won't stumble upon it when it's not ready. If you missed this step, you can make the change in the WordPress admin. Simply go to Settings | Reading and click on the Search Engine Visibility checkbox. Then, click on Save Changes. While WordPress does give you a warning that this is up to the search engines, in my experience, they do honor this and your site won't get found.
Fig 1.10: The Reading Settings screen
Once your new site is ready, you don't need to move it to the root directory; you just make a couple of small edits to the files and settings, and this tells WordPress that the site is in a subdirectory. We'll look at this later on in the chapter once your site is set up.

Installing a theme

Congratulations, you've now got a working WordPress site! It comes with the default theme bundled, which, at the time of writing this book, is Twenty Fifteen. While this is a good theme, you probably want to give your site a more bespoke design, so the next step is to find and install a suitable theme from the WordPress theme repository.

Introducing the WordPress theme repository

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.

Choosing a theme

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:

Colors
Layout details such as fixed, fluid, responsive, or the number of columns
Features such as accessibility or featured images
A subject (the type of site you're running)

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

Go to Appearance | Themes and then click on the Add New button. This will open the theme repository in your admin screen.
Click on the Feature Filter button. This will give you a screen full of checkboxes that you can tick to select keywords and filter the themes you can choose from.
If you want your new site to look as similar as possible to your old one, or you have brand colors that you need to use, it makes sense to use Colors and Layout keywords. Add others as needed to filter down the list of themes.
Once you've ticked all the checkboxes you want, scroll back up and click on Apply Filters. WordPress will then display the themes that have your keywords applied to them:
Fig 1.11: A filtered list of themes
Scroll down the themes on display and choose the one that you like the look of. Hover over it with your mouse and click on Preview to have a look at it or Install to install it. Installing it won't do any harm; if you don't like it, you can always uninstall it afterwards.
Once you've installed your theme, you'll see a screen telling you that it's successfully installed. It still isn't running on your site yet; to make this happen, click on the Activate link.

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

Customizing your theme using the theme customizer

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:

Click on Appearance to go to the Themes screen and click on Add New.
In the Search themes... box, type Pinboard and hit the Enter key.
WordPress will display the Pinboard theme for you. Hover over it with your mouse and click on the Install button.
When you see the installation success screen, click on Activate.
Next, in the Themes screen (click on Appearance if it isn't already open), click on the Customize button for the Pinboard theme.
This will open the theme customizer:
Fig 1.12: The theme customizer
Start by editing the background image. Click on the Background Image link to the left. To remove the wood graphic, click on the Remove button.
Click on the Colors link on the left and select Background color. Choose a color using the color picker. I'm choosing white, which will look quite nondescript for now, but will be better once I've made some other changes. Note that you can click on a color or type in the hexadecimal code.
Finally, click on the Save & Publish button to save your changes.

Note

Hexadecimal codes are codes made up of six letters and numbers which tell a browser what color an element is. They are always preceded by a # and are used in HTML and CSS files to define the color of backgrounds, text, and more. For more on hexadecimal codes, visit http://en.wikipedia.org/wiki/Web_colors.

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.

Tip

Important: If you want to edit your theme's code, do this using a code editor. Never use the editor that you can access via Appearance | Editor. Using this means, you can't undo your changes and could break your site. So, avoid!

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:

Customizing your theme using the theme customizer

Fig 1.13: The site with the Pinboard theme activated

Customizing your theme via the Themes options screens

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.

Customizing colors

Let's make some changes in colors by following these steps:

Go back to the admin screens by clicking on your site's name in the admin bar again.
Click on Appearance | Theme Options to open the theme options screens.
Click on the Design tab. You'll be presented with a range of color pickers to help you define the colors in your site; either pick a color or input the hexadecimal code for your color.
Tweak some of the colors, trying to stick to a palette of colors that work well together. I'm using a palette of blues.
Click on the Save Settings button and view your site. Here's how mine looks:
Fig 1.14: The site with colors adjusted
Repeat steps 3 to 5 until you're happy with your color scheme.

Customizing fonts

One of my favorite features of this theme is the fact that you can customize not just colors, but fonts too, a feature which not many themes have. So let's do this by following these steps:

Go to Appearance | Theme Options and click on the Typography tab.
There are three dropdown lists for fonts—Default Font Family, Headings Font family, and Body Copy Font Family.
Select a font you like for each. I recommend sticking to a simple, legible font for body copy, and making the heading font more interesting.
Scroll down to the Font Sizes options and make any changes you need for your design. Here, you can copy the font sizing that you used on your old site, if you want a similar look and feel.
Next, scroll down to the Colors options and make changes to the text colors. I'm making some changes to tie in with the changes I already made to the background colors.
Click on the Save Settings button and view your site. Here's how mine looks:
Fig 1.15: The site with font changes applied
Repeat steps 2 to 6 until you're happy.

Tip

If you've been making lots of changes quickly, you might find that they don't all show up. If things aren't working as you expect, just save your changes and refresh the screen.

I'm just going to leave it at this for now, but if you want, you can explore all of the Themes options screens and make more changes. Now that we've done some work on the design, it's time to tweak your site's settings.

Adding content to your site

If you're migrating from a static site, you may well have content from that to import to your new site. Or you may have been running a blog or site on another platform whose content you want to import.

Before we can start importing content, you need to know what kinds of content WordPress uses.

Types of content in WordPress

WordPress uses three main content types:

Posts: These are your blog posts or news articles, which you add regularly. You can access them via the Posts admin menu.
Pages: These are static pages such as your content page and "about us" page. Your home page could either be a static page or a page listing all of your latest posts (we'll see how to set that up later on).
Attachments: These are images, PDFs, and other media, stored in the uploads folder, which we looked at earlier. Each of them also has an entry in the database, giving WordPress metadata about them. You access these via the Media menu or by uploading them to your page or post content.

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:

Using the importer tool
By copying text from your old site
By copying code from your old site

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.

Importing content with the importer tool

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

Go to Tools | Import.
Click on the name of the platform you were using for your old blog.
WordPress will take you to an installation screen for the plugin, which imports content form that platform. Click on the Install Now button.
On the successful installation screen, click on the Activate Plugin & Run Importer link.
Follow the instructions onscreen. Depending on the platform you're importing from, you may have to upload an xml file or sign in to your account on the other platform. There will be multiple screens and you may have the option to import images as well as text.
Once you've finished, click on Posts in the admin menu to see what posts have been imported. Your old site's content should have been imported to your new site, saving you a lot of work.

Importing content manually

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.

Copying text from your old site

Let's have a go at copying the text from your old site by importing the text first. Follow these steps:

First, create a new page or post. If your old site was a small static one, you probably only have pages to copy. Click on Pages | Add New to see the page editing screen:
Fig 1.16: The Page editing screen
Open your old site in another browser window and open the page you want to copy.
Copy the old page's title and type it into the box that says Enter Title here.
Now, copy the page's content and paste it onto the main page editing pane below the title.
Check how it looks. If the layout and styling is a bit of a mess, you might need to start again, copying the code instead.
Delete any images. You'll need to upload those to WordPress separately as any images that have copied across will be linking to the image files stored in the old site, which will disappear when you eventually remove that site.
Click on the Publish button to save your new page.
Repeat this for the other pages in your site.

Copying code from your old site

The page editing screen gives you the option to edit the HTML in the page; this means that you can paste HTML from your old site into your new pages by following these steps:

Click on Pages | Add New to create your new page if you haven't done so already.
Type the page title into the title box at the top of the screen.
Above the content pane, click on the Text tab on the right-hand side.
Open the HTML file for the page you want to copy from your old site. Find the HTML for the content and copy it. Don't copy the HTML for the header, sidebar, footer, or page title, or anything from the <head> section of the page. You will probably be copying a lot of text within <p> tags and a few other tags such as <ul> and <img>.
Paste this code into the content pane in WordPress.
Click on the Visual tab to return to the visual editor and see the results of what you've done.
Delete any images; you'll need to upload these manually.
Tidy up any formatting. You might need to switch between the Visual and Text tabs if there's any code causing problems. Do this with caution!
Click on the Publish button to save your new page.
Repeat this for the other pages in your site.

Creating new pages and posts

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:

Click on Posts | Add New.
Type your post's title in the title box and the content in the text editing pane below. Use the formatting toolbar to change styles if needs be.
Note
The formatting toolbar gives you the option to change fonts and colors, but I would strongly advise not to do this. Use the styles provided with your theme and tweak fonts and colors using the Themes options screens. This will retain a professional, coherent look to your site.
When you're ready, click on the Publish button to save your post.
If you want to, assign one or more categories or tags to your post by selecting them from the list on the right-hand side or typing in new ones.
Keep on doing this. If you want to add a back catalogue of posts, you can amend the publish date for each post in the Publish pane by clicking on Publish immediately and selecting the date you want to use. This will make your blog look more established than it would if all your posts had today's date!

Uploading images and media

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

Adding images to your posts and pages

WordPress lets you insert images anywhere you want in your post or page content by performing these steps:

Open the post or page you want to add an image to and click on the point in the text where you want the image to appear.
Click on the Add Media tab to open the media upload screen.
Click on Select Files and select the image file you want to upload.
The file will be imported and you'll see it on the screen. Now, work your way through the options on the right-hand side of the screen:
- Title: This is the name of the image. Leave this as it is or change it to something more meaningful for accessibility and SEO so that it can help when searching media on your site.
- Caption: Type the caption text here or leave it blank.
- Alt text: Type in the alternative text for screen readers.
- Description: Adding a description can help with SEO. It won't be displayed on the page, but may show up in search results.
- Alignment: Select how you want to the image to be aligned. If you choose Left or Right, the text will wrap around the image.
- Link To: Specify if you want visitors to be able to click on the image and go to its file or attachment page, to a custom URL, or if you want no link at all.
- Size: Select from the default sizes WordPress gives you to choose how big this will appear on the screen.
Click on Insert into page to insert the image.
Your image will now appear in the editing screen, but it might not look very good because your theme's formatting isn't applied in the admin screens. To check how it looks, either click on the Preview button to preview without publishing your changes or click on the Update button to save your changes and then click on View page at the top of the screen. Here's my page with an image added:
Fig 1.17: The page with a right-aligned image of me!

Adding PDF files to your posts and pages

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

Open your post or page and click on the point in the text where you want the PDF to appear.
Click on the Add Media button and then Select Files.
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
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.
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:

Adding PDF files to your posts and pages

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.

Setting up navigation menus and widgets

Most themes support navigation menus that you can edit using the WordPress admin screens. This is much easier than coding your menus. They will also support widgets, which are items you can add to widget areas (normally in the footer and sidebar) to display lists of posts, links to other sites, social media feeds and links, and much more.

Let's start by setting up the navigation menu.

Creating the main navigation menu

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:

Go to Appearance | Menus.
Depending on how your theme is set up, you may see a dummy menu displayed with your pages. To create a menu from it, click on Create Menu.
Click on the Primary Menu checkbox below the menu. This will add it to the site's main navigation area.
Click on the Save Menu button.
Now go back to your site's frontend to view your menu:
Fig 1.20: The site with a navigation menu
Go back to the Menus screen to make adjustments to your menu if you need to. You can drag additional posts, pages, and categories (if you've created categories for your posts) on to it.
Every time you make changes, remember to click on the Save Menu button. WordPress doesn't save changes to the menu in the background.

Adding widgets

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:

Go to Appearance | Widgets.
By default, WordPress places a set of widgets in the theme's first widget area. In this theme, the first widget area is in the header, and those widgets look a bit odd there. Remove all of them except the Search widget by clicking on the arrow to the right of its box and clicking on Delete.
Now, drag some widgets into the other widget area, putting them where you think they are appropriate. Think about mirroring the content in your old site where possible. If you want to just insert some text or HTML, you can do this using the Text widget. You can add more than one widget to each widget area, but don't go too mad!

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

Making your WordPress site live

Once you have all your content in place, have installed and configured any plugins you want to use, and are happy with your widgets and with any customizations you've made to the design, it's time to go live.

If you aren't running your old site on the server still and didn't install WordPress in a subdirectory, this is very simple. Perform these steps:

Go to Settings | Reading.
Uncheck the Search Engine Visibility checkbox.

That's it! Search engines can now find your site. You'll need to do a bit more to publicize it, but it's now public. Enjoy!

However, if you still have your static site running, there's a bit more to do:

In your FTP client or in File Manager in cPanel, find the folder where the WordPress files are located and find two files—index.php and .htaccess. If you haven't made any changes to permalinks, you won't have an .htaccess file, so just work with index.php.
Copy the two files (or one if you don't have .htaccess) to the next directory up, that is, public_html.
Open the copy in public_html and find the line that reads as follows:
```
require ('./wp-blog-header.php')
```
Change it to this:
```
require ('./XXX/wp-blog-header.php'),
```
Here, XXX is the name of your subdirectory.
Save the file.
Back in the WordPress admin, go to Settings | General.
Edit the Site Address and WordPress Address fields so that they read as follows, where site.com is your domain and folder is the name of your subfolder where WordPress is stored. Change them to the following, making sure you spell everything correctly to avoid redirect loops:
- WordPress address (URL): http://site.com/folder
- Site Address (URL): http://site.com
Click on the Save Changes button.
Back in your FTP client, delete all the files from your static site. If you want to back them up, copy them to your PC, but make sure they're all gone from your server to avoid any conflicts.
Now visit your site. You'll find that it uses your main domain name and not the subdirectory.

wavon Nov 22, 2015

This book is well organized, thorough, and clearly written. It's helpful for learning what you can do with WordPress without needing to code. The step-by-step instructions are easy to follow, even when you need to make minor edits to php files.Chapter 3, Creating a Network of Sites, is fantastic. Activate WordPress Multisite, and you can use one WordPress installation to create as many sites as you like, or let users create their own. Each site can have different themes and plugins and its own domain name. This setup is ideal for hosting a portfolio site with multiple project sites. It allows updating WordPress, themes, and plugins in a central place rather than for each site separately. If you want to charge users to register a site in your network, you’ll learn how to use PayPal to manage paid memberships.

Amazon Verified review

Amazon Customer Nov 18, 2015

I've always liked cookbooks for software, because the best way to learn is from example. This book has excellent examples, with a minimum of mistakes or omissions. Using it, I already fixed a faulty website a friend of mine created, and I had never used Word Press before!

Interesting, well presented and dug me out of a problem very quickly as I wanted to combine features from old word press activities and update themI have been through the publication once but need to reread the other elements - however I found what I needed and got the job done quickly because the book was easy to read, follow and implement.

Jay Dec 21, 2015

product as described

WordPress 4.0 Site Blueprints (Second Edition): Create a variety of exciting sites for e-commerce, networking, video streaming, and more, using WordPress

What do you get with Print?

Downloading the WordPress files

Creating a database on your server using phpMyAdmin

Uploading WordPress to your server

Activating the WordPress installation script

The WordPress Dashboard and administration screens

Customizing colors

Customizing fonts

Note

Copying text from your old site

Copying code from your old site

Note

Adding images to your posts and pages

Adding PDF files to your posts and pages

Description

Product Details

What do you get with Print?

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs