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
uploadsfolder, 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.
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.
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.
- 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.
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 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:
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.