This is ONE way to convert an existing static/Dreamweaver site to WordPress. You could just create a Page for every webpage on your existing site, but this would not be harnessing the power of WordPress. The method below allows you to convert an existing site but still have the power of adding future content without revisiting your menus each time. It provides a structure for content, but also harnesses some of the automation possible with WordPress.
If you don’t have a firm grasp of the WordPress meaning of Categories, Tags, Pages, and Posts, then visit Definitions of Common WordPress Terms.
Step 1: Use Your Menu to Determine Categories
The menu in your Dreamweaver site is probably a good place to start with in deciding what Categories your site should have. With some exceptions each current top-level menu item might become a Category. For instance look at this menu from the Registrar’s site:
- Contact Us
- Bachelor’s Degrees
- Student Resources
- Faculty Resources
- University Catalog
This list covers the main areas of their site. As they think about what articles they might write in the future, they can easily map each article into a single one of these areas. However not all of these should become Categories. Home and Contact Us are single pages – that is a hint that they are probably static pages, not truly categories. Unless you can imagine writing an article that would belong as part of that menu item, it is probably a static page. It will still be in your menu, but probably not be a Category.
The list also contains the item “University Catalog”. This is actually a link to a different, although related, site. It also would not be a category, and there is a strong argument that it doesn’t even belong on the menu. The home page text and/or the footer menu is a good place to mention sites that are related to yours, but not part of the navigation. It is confusing for folks when they select an item from the main navigation on the site and end up on a different site with different navigation.
So with these deletions the proposed category list for this site would be:
- Bachelor’s Degrees
- Student Resources
- Faculty Resources
You might even choose to replace Student and Faculty Resources with a single item, Resources, and then tag the items in them as “students” or “faculty” or both. If NONE of the posts in these areas are for both faculty and students, then there is a stronger argument for having two categories. If many of the posts are for both, then the argument would be that it should be called Resources and the landing page can sort out the two divisions.
Once you have decided the Categories appropriate for your site, proceed to the next step.
Step 2: Create Pages for Each Menu Item
Some of these pages will be true static pages (Home, About Us, Contact Us are good examples). The rest of them will be a “Landing Page” for each Category. This landing page will explain the Category and then, using the “magic” in Step 4, dynamically list the titles of each Post in this Category. If your staff writes an addition article in this Category, it will magically show up here without you doing anything.
To create a page go to your Dashboard and select Pages > Add New. Add general content that you think helps the user understand whether they are in the right section. If they must do a certain thing, like get an account, before any of the other information makes any sense, it would be useful to put that information here. Also general information that affects the whole category, like News, warnings about outages, announcements of upcoming deadlines – these transitory elements also belong on this cover page. Keep it short and informative, and do not add general information that doesn’t help the reader, such as what you do behind the scenes. Just tell them what they need to know. And of course you will need to keep it up to date.
Step 2b: Create Primary Menu
Once you have all the landing Pages created for your Menu, or at least some of them, create your menu. You can always modify the menu later. Go to your Dashboard and select Appearance, Menus.
- Next to Select a Menu to Edit. Select Main (Primary Navigation) and press the Select button
- From Pages on the left, check the check box for a Page that you already created.
- Select Add to Menu
- Repeat this for several or all Menu items.
- Using the area on the right, Menu Structure, drag and drop the menu buttons into the Order you want.
- Modify the Menu button label by select Page next to the menu item and typing the correct label into Navigation Label.
- Repeat 5,6 until your menu is complete
- Select Save Menu button
Step 3: Create Posts with Categories
Copy Content from Old site to New site
Now you are going to create a Post that belongs under one of your Menu categories. The two-browser-window method will help with this technique.
Browser Window 1: Open a browser window and go the Dashboard of your new WordPress site. Select Posts, Add New.
Browser Window 2: Open a new browser window and go to your old (non-WordPress) site. Find some content on a webpage of the old site that you want to appear under one of your main menu items in the new site. Then do these steps to get the content into your new site:
- Highlight and Copy (Ctrl-C or ⌘C) the text from the browser window.
- Go to your browser window with the WordPress Dashboard and make sure you’re on the Edit Post window.
- Paste (Ctrl-V or ⌘V) the text in the main window of Edit Post.
- Cut (Ctrl-X or ⌘X) the Title of the article and paste it into the Title bar above the main editing window.
Clean up the content and Add Images
For instance, make sure all your main Headers are h2, sub headers h3 and below etc. (The Title will appear as h1 in most themes so don’t use it within your post or page). Your visual editor has tools for this, but if you don’t see all the tools shown below, click the orange-circled “kitchen sink” icon to show you everything, including the green-circled text tag selector.
If there are images you must move them to WordPress. Do this by copying from your original site and adding to the WordPress media center, then placing the image in your post/page:
- Go to Browser Window 2 (your original website) where it is showing the image
- Right click on the image in the browser and select Save Image As… and save to the desktop or other memorable place
- In Browser Window 1 (new site) go to your post, select Edit, and remove the existing image that you previously copied over . Leave your cursor where the you want the new image to appear.
- Select Add Media from the tool bar at the top of the edit window.
- Select Upload files and then either drop the images in or browse for them. Once the image is uploaded the Media window will display.
- Put a good description of the image into the Alt Text area at right.
- Select the alignment (left, right, etc) and the size (thumbnail to full size).
- Select Insert into Post
- Repeat for all images in the site.
Select a Category and Publish
When you’re happy with the text, select the appropriate Category from the category list at right of the editing window. The next window down on the right is Tags. Add any tags at this time as well. Finally at the bottom of the right side of your Edit Post page is Featured Image. Set a Featured Image if you really want to wow folks. Featured Images are used differently in different themes, but for the Western theme they are used on Searches and Category Lists. If you don’t see them go to your Dashboard and select Genesis, Theme Settings, Content Archives and select Include Featured Image.
Now press Publish.
Repeat this for a few more articles if you like.
Now create magic with step 4!
Step 4: Add shortcodes to Associate Pages and Posts
In Dreamweaver sites you had sub-menus for most of your menu items. In WordPress, although you can have sub-menus off the main menu, the method described below allows you to grow your site without fussing with your menu. See below what using this feature looks like on our site. The circled links with bullets are automatically added by the shortcodes. If all your posts have “Featured Images”, then you’ll see the images as shown below, otherwise you can simply use a bulleted list.
First make sure this capability is activated on your site: go to Dashboard > Plugins. When the plugins page comes up, scroll down to Live Shortcodes. Activate it if you have not already.
Let’s use the example of a recipe site to explain how to add a Category List to your menu landing page. Imagine that your menu has these links: Entrees, Soups, Salads, Desserts. If we are working on the Desserts landing page we now want to list all the desserts that we have recipes for. The landing page will describe general information about the desserts – maybe that they serve four unless otherwise noted, etc. Then add a Heading on the page that says something like “Related Posts” or “More Articles on this Topic” or, for this specific recipe site, maybe “Our Yummy Desserts”.
Notice that there is function at the top of your editing screen called “<>Add Shortcodes”. With your cursor right after the “More Articles on This Topic” header, click Add Shortcodes.
When the shortcodes page comes up, select the Latest Posts item. Make these selections to start:
- List Style > Unordered List (use “None” if using images)
- Display Thumbnail > Disable (or if your posts have Featured Images, display these using “Very Small”)
- Number of Posts > 20 (this is the max and will display as many as you have up to 20)
- Choose the Category of this menu item under the Display Posts from Selected Categories
- You can also use tags to refine your list of categories. Alternatively use tags instead of Categories.
Notice that as you make these choices the resulting look is displayed to the right. The titles of the posts you created in step 3 should show up.
Customize Shortcodes Display
Now get just the display you want. For instance go to Content Options and select Display Post Excerpt. This adds the first few lines of the post to the Title of the post and could help the user decide if this is the post they’re interested in. However it may also be text heavy if you have a lot of items. Also try switching from List style > Unordered List to None and see if you prefer the list with bullets or without. If your posts have Featured images try adding that. Once you have the look you want select the Insert Shortcodes button at the bottom right.
Also see more information about Shortcodes.
Step 5: Create Static Front Page or go blog-style
Your Front Page can be a Page that you create, or it could be a list of your Posts. Blogs often show an excerpt of their posts, with the latest at top. You may wish for your homepage to stay the same and introduce your subject matter. This is commonly done with a Static Front Page. Go to your Dashboard and select Appearance, Customize, Static Front Page and choose which method you wish to use.
If you want a combination of the two, you might try using a list of your Posts as the Front Page, and then adding a Widget Text Block to get some introductory text to show up on the Front Page only. To do this see the next section.
Step 6: Add widgets etc
Widgets are an interesting way to add more functionality to your WordPress site. Review them by visiting your Dashboard and going to Appearance, Widgets. Pick a Widget, then selection a location to put it (this depends on the Theme you are using but Primary Sidebar is a good place to start). Then a dialog opens for you to apply settings. For the Text Block mentioned in Step 5 you’ll need to input the title, the text, and then press the Visibility button to decide where this Widget will appear. Then select Save.