Build WordPress Sites with Dreamweaver CS5: Part 1
WordPress is one of the Web’s most popular applications. It drives not just small, personal blogs, but many large sites as well, such as Entertainment Weekly’s Inside TV and I Can Has Cheezburger. In fact, Web designers have leveraged WordPress’ easy to use content-update tools to provide a complete content-management system for clients. And thanks to the growing list of WordPress plug-ins, you can use it to create e-commerce sites, community portals, classified ad sites, members-only sites, standard small business sites, and nearly any type of Web site you could imagine.
You may have seen an earlier series, “WordPress for Creative Pros,” which does a great job showing you how to set up WordPress on your Web server; create and edit blog posts; and customize the functionality and look of your blog. But when you’re building WordPress-driven sites for you or your clients, you don’t really want the in-progress site on a Web server where all your mistakes, temporary designs, and dummy copy are visible to the world. A better approach is to do all the initial work on your own computer and then upload the finished site to a Web server.
In this series, I’ll show you how to set up WordPress on your own computer, connect Dreamweaver to it, and use Dreamweaver CS5’s powerful new tools for working with WordPress—tools that can make it easier to customize the look of a WordPress site to match your artistic vision. In addition, you’ll learn how to put the finished design up on the Web for the world to see.
An Overview of the Process
Because WordPress is a Web application—dependent on a Web server, the PHP programming language, and a MySQL database—it’s not as easy to work with as a simple collection of HTML, CSS, and JavaScript files. Before we dive in, let me give you a broad overview of what you’ll need to do:
1. Set up a local Web server. WordPress won’t work without a Web server. Fortunately, it’s not too hard to install a working Web server—with all the necessary components—on your desktop computer.
2. Set up a database. WordPress keeps its information (including blog posts, Web page content, and all of its settings) in a MySQL database. You need to set up that database before you install WordPress.
3. Download and install WordPress. You’ll grab the WordPress files from the WordPress site and install them on your local Web server. This may sound daunting, but it’s actually simple.
4. Connect Dreamweaver to your WordPress site. For Dreamweaver to work with WordPress, you must set up a new site in Dreamweaver. This isn’t much different than working with a standard HTML site.
5. Customize a WordPress theme. A WordPress site’s appearance is controlled by its theme. A theme is composed of most of the building blocks of any Web site—HTML, CSS, graphic files, JavaScript—with a sprinkling of more complex PHP programming code. By either building your own theme, or by modifying an existing theme, you can make a WordPress site look any way you want.
In this article, I’ll cover the first four steps of this process; in part 2, I’ll take you into the world of theme development; and in the final installment of this series, I’ll walk you through the steps to make your new design live on the Internet.
Set Up AMP
WordPress depends on several server-side technologies. The most common combination is Apache (a Web server), MySQL (a database server), and PHP (a server-side programming language). This trio of powerful tools is often simply called AMP. And while these are complex technologies, getting them set up on a Mac or on Windows is a snap, thanks to free programs that can install them on your computer in a matter of minutes.
For Windows, you’ll want to use WAMP Server. You can download a free installer program from https://www.wampserver.com/en/download.php. For a detailed explanation of the process, watch my free video at https://uptospeedguides.com/wamp.
Mac users have a similar program they can turn to: MAMP. Visit the MAMP homepage and click the “Download now” button; once it’s downloaded, simply drag the MAMP folder to your Applications folder. For a detailed video of the process, go to https://uptospeedguides.com/mamp/.
Set Up the Database
Now that you have a Web server running on your computer, you can add a database for WordPress to use. WAMP and MAMP both include phpMyAdmin, a Web-based tool for managing MySQL databases. Depending on your operating system, you’ll access this program differently:
Windows users should open a Web browser and type https://localhost/phpmyadmin in the location bar to start up phpMyAdmin.
Mac users should open a Web browser and type https://localhost/MAMP/ or https://localhost:8888/MAMP/ to open the main control page. Click the phpMyAdmin that appears in the top of the screen.
Either way, the phpMyAdmin page appears (Figure 1).
Figure 1: Using phpMyAdmin, you can add a MySQL database in just one step. Click the figure to see a larger version.
Now you create a new database:
1. In the Create New Database field (circled in Figure 1) type the name for the WordPress database. This could be something as simple as “wordpress,” “blog,” or the name of your site, but avoid spaces and punctuation marks—sticks to letters, numbers, hyphens or the underscore character.
2. Click the Create button. phpMyAdmin tells MySQL to create the new database.
Next, you need to create a new MySQL user. A user is just an account that can access the database; this user has the privileges needed to change the database: add, delete, edit information, and alter the basic structure of the database. WordPress will use this user account to talk to MySQL, so that WordPress can add, read, and edit the data it needs to function.
3. Click the Privileges button in the top row of buttons on the phpMyAdmin page.
4. Click the Add New User link. The Add a New User screen appears (Figure 2).
Figure 2: WordPress won’t be able to talk to the database until you create a new MySQL user account. Click the figure to see a larger version.
5. Type a user name. This can be something simple like “admin”.
6. From the Host menu, choose Local. The Web page adds “localhost” to the text box to the right of the menu. This option tells MySQL that the new user you’re about to create can only communicate to MySQL locally. In other words, only code running on the same computer as MySQL—such as WordPress’ files running on the Web server—can use this account. This acts as a security precaution and is intended to prevent someone—like a hacker—from connecting to this MySQL account from another computer and ruining the database. (It isn’t really necessary in this case, since it’s unlikely anyone is going to try to hack into your home computer and mess up your MySQL database; but on a live Web server, this is a good step to take.)
7. Type a password in the Password text field; then type the same password in the Re-Type field. This password doesn’t have to be completely obscure, since you’re only creating this account on your local computer. Write down this password because you’ll need it in a minute to set up WordPress. (When you’re ready to make your new WordPress design live, you’ll set up WordPress again on your Web server. That’s when you’ll definitely want a secure password.)
8. Make sure the Grant All Privileges on Database is selected (circled in Figure 2 above). This setting is important. It lets this new user account talk to the database you created earlier.
9. Scroll to the bottom of the page and click the Go button. phpMyAdmin creates the new user, but you’re not quite done. The user isn’t active until you reload the database’s privileges.
10. Click the Privileges button at the top of the screen once again, and scroll to the bottom of the screen. In the yellow box, click the Reload the Privileges link.
Download and Install WordPress
Now that you’ve set up the server, you’re ready to install WordPress. Fortunately, this is easy.
In your Web browser, visit https://wordpress.org. Make sure you visit .org and not .com. Click the Download WordPress button to go to the Download page; click the Download WordPress button again to save the WordPress files to your computer.
Once the files are on your computer, you need to move them to the Web server. Where you place them depends on whether you’re using WAMP or MAMP, and exactly how you want to use WordPress.
On Windows, WAMP’s Web server files are in C:wampwww. That folder is the local root folder for the server, and Web files you put there are accessed in a Web browser with https://localhost/.
On Macs, MAMP’s Web files go in Applications : MAMP : htdocs. You place your files in this folder and access them with https://localhost/ (or https://localhost:8888/).
NOTE FOR MAC USERS: I sometimes tell MAMP users to type https://localhost or https://localhost:8888/ . That’s because MAMP starts off life using a port number—:8888—to run the Web server under, so to access the site in a Web browser you must type https://localhost:8888/. You can get rid of the port number and just use https://localhost. See the video at https://uptospeedguides.com/mamp/ for more information.
Depending on how you’ll use WordPress, you may want to have the WordPress files in a subfolder. Some Web sites have a blog that’s separate from the main site, and this blog is often accessed via a subdirectory like https://www.my-site.com/blog/. If you plan on using WordPress only for the blog, copy the WordPress folder you downloaded into either C:wampwww or Applications : MAMP : htdocs . Then rename the folder to something like “blog.”
Alternatively, you might use WordPress to drive the entire site; if, for example, you’re creating a blog-only site, or you want to use WordPress to manage everything including the homepage, About Us page, and so on. If that’s the case, copy all of the files inside the WordPress folder you downloaded into the C:wampwww or Applications : MAMP : htdocs folder.
For this article, I’ll create a blog as a subsection of the site, so I’ll move the WordPress folder to the local root folder (C:wampwww or Applications : MAMP : htdocs) and rename it “blog.”
Now you’re ready to install WordPress:
1. Launch a Web browser and type https://localhost/blog . This takes you to a message that tells you that you don’t have a WordPress configuration file yet, and offers to create it for you.
2. Click the Create a Configuration File button. This takes you to another message with more details on the set-up process.
3. Click the Let’s Go button. On the page that appears, type the name of the database you created earlier, the name of the MySQL user you created, and that MySQL user’s password. You can skip the other two settings.
4. Click Submit, and then on the page that appears click the Run the Install button. A page will appear asking you to provide a few more bits of information (Figure 3).
Figure 3: WordPress’s Installation process requires a few pieces of information. Click the figure to see a larger version.
5. In the Site Title field, type the name of the site. This name will appear as part of the site, so the name can be the name of the site (if you’re using WordPress to manage an entire site), or the name of the blog (if you’re creating a blog part of your site). You can also change this name later in WordPress’ control panel.
6. In the Username field, type a name for the administrator of the site. This username is different than the MySQL user. This is the name you’ll use to log into WordPress to add and edit content. By default, WordPress suggests “admin”, but you can change this to your name or something else.
7. Type the password, twice. This is the password you’ll use to log into WordPress. Remember this password.
8. Type your e-mail address in the Your E-mail field. This isn’t that useful for a local installation of WordPress. However, when you install WordPress on your real live Web server in part two of this series, the e-mail address will be useful.
9. Click the Install WordPress button. After a few moments, you’ll see a “Success!” message. You’re done; WordPress is installed.
10. Click the Login button and log in using the username you created in step 6 and the password you chose in step 7. Now you’ll see the WordPress dashboard. You can learn more about how to use the dashboard in “WordPress for Creative Pros.”
Set Up Dreamweaver
Now that you’ve successfully installed a Web server, database server, and WordPress—I hope you’re feeling proud—it’s time to start up Dreamweaver and get it ready to work with your new WordPress site.
1. Launch Dreamweaver CS5. If you have an earlier version of Dreamweaver, these instructions aren’t going to work. Not only did the site setup process change in CS5, but all of the tools that I’ll be demonstrating are new in CS5.
2. Choose Site > New Site. The Site Setup window appears (Figure 4).
Figure 4: Setting up a site is the most important first step in using Dreamweaver to build a site; and it’s absolutely required when working with a server-side site like a WordPress blog. Click the figure to see a larger version.
3. Type a name in the Site Name field. This can be anything you want and can match the name you provided when setting up WordPress.
4. Click the Folder icon and navigate to and select the local root folder. On Windows this is C:wampwww; on Macs this is Applications : MAMP : htdocs. For a regular site, this is normally all you need to do to get started building HTML pages; but because you’re using WordPress you also need to provide Dreamweaver a few more details.
5. Select the Servers category in the left sidebar of the Site Setup window. Here you can provide the information Dreamweaver needs to connect to your live Web server and transfer files from your computer to it. But you can also tell Dreamweaver about your “testing server”—the local Web server you set up—so that it can work with dynamic files (meaning PHP files).
6. Click the + button to create a new server. A new window appears (Figure 5).
Figure 5: When you’re working with a local Web server, you need to tell Dreamweaver where the files for your local Web server are located.
7. In the Server Name field, type “local”. Choose Local/Network from the Connect Using menu. The name doesn’t matter; it can be anything. However, choosing Local/Network is important—it tells Dreamweaver that the Web server you’re interested in is on your computer.
8. Click the Folder icon to the right of the Server Folder field and select the local root folder. On Windows this is C:wampwww; on Macs this is Applications : MAMP : htdocs.
9. In the Web URL field type https://localhost/. (On Macs, you may need to type https://localhost:8888/ as I described in the note above).
10. Click the Save button to exit this window and return to the main Site Setup window (Figure 6).
Figure 6: When you have a Web server running on your own computer and want to use it for testing your site, make sure you tell Dreamweaver about it in the Site Setup process. Click the figure to see a larger version.
11. Uncheck the Remote checkbox and check the Testing box. You check the Remote box when you want to connect to the live Web server and upload files to it. You check the Testing box when you have set up a local Web server for testing dynamic, server-side sites.
12. Click the Save button. Dreamweaver reads all the files in the site and displays them in the Files panel.
Finally, Preview the Blog
Now you’ve set up Dreamweaver and can open the main WordPress file and preview it:
1. In Dreamweaver’s Files Panel, locate the file index.php inside the folder in which you placed WordPress files. For example, if you created a folder named “blog” in the site’s root folder, locate the blog folder, and double-click the index.php file. However, if you put all of the WordPress files in the site’s root folder (because you wanted to use WordPress to manage all of your site), locate and open the index.php file in the site’s root.
2. In Dreamweaver, click the Live View button (circled in Figure 7). Live View lets you preview a page as it would appear in a Web browser. For a PHP-driven page like WordPress files, Live View actually views the Web page through the Web server, processing all of the necessary programming code to make the page appear as it should.
Figure 7: Dreamweaver’s Live View lets you preview a page directly from a local testing Web server. Click the figure to see a larger version.
Wow! That was a lot of work, but you’ve set up all the necessary technologies to get started building a WordPress site. In the next article, we’ll dive into how WordPress works, look at how you can use Dreamweaver to work with WordPress, and customize the look and feel of your WordPress site.
This article was last modified on January 8, 2023
This article was first published on February 2, 2011
Commenting is easier and faster when you're logged in!
