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 http://www.wampserver.com/en/download.php. For a detailed explanation of the process, watch my free video at http://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 http://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 http://localhost/phpmyadmin in the location bar to start up phpMyAdmin.

Mac users should open a Web browser and type http://localhost/MAMP/ or http://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 http://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 http://localhost/.

On Macs, MAMP’s Web files go in Applications : MAMP : htdocs. You place your files in this folder and access them with http://localhost/ (or http://localhost:8888/).

NOTE FOR MAC USERS: I sometimes tell MAMP users to type http://localhost or http://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 http://localhost:8888/. You can get rid of the port number and just use http://localhost. See the video at http://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 http://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 http://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 http://localhost/. (On Macs, you may need to type http://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.

 

Tags
Posted on: February 2, 2011

44 Comments on Build WordPress Sites with Dreamweaver CS5: Part 1

  1. The strong tag seems to be making the text as serif and smaller.

    That seems really odd.

  2. Looking forward to step 2. When can we except that one?

  3. You have got to be kidding me… Who is going to go through all the trouble of setting up a web server on their computer when all you have to do is use a temporary domain name to run it under an account on a host? Or just disallow access to it through robots.txt and/or .htaccess? The chance that most people will have in getting this to work on their Windows computer is slim and on a Mac? Don’t make me laugh…

    We are constantly developing sites – whether they be static, CMS, WordPress, etc. and we have numerous temporary domains we use over and over as development domains. We can set up a new site on the same server as the old site and simply switch the domain name over when the new site is ready. Then your client can get to it also, and in the case of a CMS site can be putting content in while you are working on the design.

    Much more efficient use of time IMO!

  4. #3 said: “Who is going to go through all the trouble of setting up a web server on their computer… Don’t make me laugh”

    All the trouble? In 15 minutes I had everything installed and running per instructions, and am already deep into my early design choices.

    I suspect making you laugh would be an onerous task, given your demeaning attitude toward “most people”.

    Given that my blog will be devoted to the confluence of technology and the arts, I may even devote the first post to discussing those who denigrate the efforts of those less skillful or less experienced than themselves; your post makes you a fine example for inclusion.

    – – – – – – – – – – – – – – – – – – –
    Sanity is a relative concept.
    If you don’t believe me,
    let me introduce my relatives.
    – – – – – – – – – – – – – – – – – – –

  5. Can you do this on CS4?

  6. No, this is CS5 territory.

    Terri Stone
    Editor in Chief, CreativePro.com

  7. Very timely and important topic for me. Thank you.

  8. I’m 99% sure you can do this on CS4, wait, you can, since I’m using nearly the same method to create a PHP/MySQL application from scratch. Setting up a site is the same, just a different interface. Also, Live View is available although I haven’t used it.

  9. Dave,
    Your tutorials are always clear and complete. Thanks for that. I tried installing MAMP about 2 years ago and – after 2 or 3 lengthy sessions – gave up. This had me up and running on my Mac in 30 minutes.

  10. The stuff covered in this tutorial (Part I of the series) will work with both Dreamweaver CS4 AND CS5. However, Part II will cover tools that were added in Dreamweaver CS5. Those tools simplify working with complex PHP-driven sites, and are very useful when working with WordPress. While you can still use Dreamweaver CS4 to edit WordPress files, Dreamweaver CS5’s new features make editing the files — especially editing the CSS for a WordPress theme — a lot easier.

    –dave mcfarland

  11. This is such an excellent tutorial and as I have some (rusty) knowledge of MySql and Wamp, I can’t wait to try it…now all I need is to upgrade to cs5, though I’ll have to struggle a bit longer unfortunately with cs4 🙁

  12. FYI, your installation directions won’t work on Win 7 and I have yet to find any install instructions using either wamp or xamp that will work. I’m sure those who are very knowledgeable can do this, but for the average user – good luck.

  13. I’m in need of a redesign and have been putting of doing so. This tutorial is so timely. Can’t wait to put it to use. Thx DSM!

  14. Just for a note to comment on one of the above post’s. I have always, and will continue to do so, design my sites on my local server before uploading to remote hosting. It is the best way to design, build, and test prior to publishing. Thought most professional designers did it this way.

    On another note, looking forward to starting on this tutorial. I have used Adobe and AutoDesk products for many years to accomplish amazing uncommon designs for websites, and have just jumped into WordPress. After realizing that almost all of the free WordPress themes are somewhat limited in their aesthetics design capabilities, I’m anticipating an enlightening experience using your tutorials to get some fantastic sites made in WordPress.
    Will post my views on the tutorial later. Thanks.

  15. Hi Dave,

    Thanks for the tutorial! I am sure as soon as I can get WAMP to show me something other than a blank page at http://localhost/phpmyadmin I will be styling. Any idea on why this could be happening?

    Regards,

    Chantelle

  16. For some reason, this process has been very difficult for me UNTIL I found your article. It walked me through all the details & now it’s finally working for me. THANK YOU so much!

  17. Windows 7 Ultimate SP1 x86
    WAMP 2.1e
    Dreamweaver CS5.5 Ver.11.5
    Works following the tutorial step-by-step.

    Still can’t make it work with XAMPP though, so I’ll stick to WAMP in my pc and portabile xampp & notepad++ on usb stick.

  18. Perfect timing… getting ready to design my first WP site for new client. Seems like all WP sites look basically the same (like a table setup)… Hopefully, in Part 2 I will learn how to make a WP site look unique. Thanks for nice, clear, concise, instructions.

  19. PLEASE, can someone clear up the confusion on EXACTLY how to move a local (MAMP) wordpress site to an EXISTING remote server that is already LIVE with an EXISTING HTML site? Begging……please…?

  20. The only downside to this product is the high price, but we can assure you that it is well worth spending the money.

    Database Outsourcing in Australia

  21. excellent step by step tutorial! i’m a complete newbie to all of this, and your article made it so easy for me to set up. thank you! —on to the next article!

  22. Beautiful. Always what I wanted to know.

  23. What can I do? I mistakenly installed WordPress before setting my database. Do I have to uninstall WordPress, set up the database then reinstall and recreate everything? Or can I export all the content, uninstall WordPress, set up the database then reinstall and import the content?
    thanks. LoRain

  24. Excellent superb step-by-step instructions. I can’t wait to see if I can successfully navigate through the next article. Thank you so much for making this available.

  25. This is one great step by step tutorial. Thank you very much for sharing, you saved me a lot of time!

  26. Hey once I tried to edit twentyten theme in a different way. I mean I used @import to make a twentyten child theme. But I had a problem with that. I mean when I saved everything nothing was saving to the child theme style.css files. that is the problem I faced. How to do that could somebody help me?

  27. Thank you so much for your explanations – I’ve successfully installed a French version of WAMP, a French WP on Dreamweaver CS6 – no problems at all. What I really like about your explanations is that it’s not just a cook-book recipe, but you also explain what’s happening. Thanks!

  28. I regularly read/watch tutorials and have to say that this was one of the best; well written, straightforward, with just the right amount of visuals. Thanks!

  29. My native language is spanish, but your tutorial is awesome. Well explained, very instuitive, short explanations for every move. Great job. And thank you very much for sharing your knowledge and use your time to teach.

  30. You’re a lifesaver. I’ve spent 2 days trying to set up what your tutorial helped me set up in an hour. thank you thank you thank you.

  31. just get errors when trying Live View :

    Warning: require_once(C:Program FilesApache Software FoundationApache2.2htdocs/wp-load.php) [function.require-once]: failed to open stream: No such file or directory in C:Program FilesApache Software FoundationApache2.2htdocswp-blog-header.php on line 12

    Fatal error: require_once() [function.require]: Failed opening required ‘C:Program FilesApache Software FoundationApache2.2htdocs/wp-load.php’ (include_path=’.;C:php5pear’) in C:Program FilesApache Software FoundationApache2.2htdocswp-blog-header.php on line 12

  32. Nice post

  33. Great tutorial! Very helpful.

  34. Your tutorial was very easy to follow and understand. I really appreciate the time you took to make it. Coming from an HTML background, with a long hiatus, trying to incorporate WordPress has been a difficult transition. At least this step is complete. Thanks again!

  35. umre fiyatları

    May 7, 2013 at 10:26 pm

    First I wanted to thank you guys for some great freebies themes but most importantly the various topics from creating a plugin, seo or working with themes. Keep up the great work.
    I am complete newbie in trying to create my own theme and probably should write how I have driven myself crazy. From bootstrap and foundation had to learn html, css than I finally got the full layout bringing it over to wordpress is complete difference story.
    I just really wanted to say thanks, keep the fresh content coming because that sometimes is the hard part tutorial or how to from 2008 not sure how relevant they are today

    Regards
    Joseph

    http://www.yorungetur.com/

  36. thank you.

  37. I have search endlessly for a strong weapon to remodify themes and here am i blessed and favoured bountifully by Angel Dave Sawyer McFarland (LOL). Just wanted to say thank you a bunch for this. I really lookfoward to getting trained more by you. Thanks. 

    Francis Totti

    francisods@yahoo.co.uk

  38. Jussi Tuukkanen

    March 1, 2014 at 8:40 am

    thank you, very informative and thoroughly put together

  39. Homepage erstellen? Negeso Website/CMS ist ein umfangreiches und benutzerfreundliches online Content Management System: aktualisieren Sie die Inhalte Ihrer Webseite ganz einfach über Ihren Browser.
    http://www.negeso-cms.de

  40. website erstellen

    May 28, 2014 at 9:05 am

    Website erstellen? Wählen Sie aus vielen Quick-Start Vorlagen, mit denen Sie Ihre Website erstellen können. Das Webdesign Ihrer Wahl kann mit über 100.000 Stil-Kombinationen ganz nach Ihrem Geschmack angepasst werden.
    http://www.sitementrix-cms.de

  41. I followed your great tutorial to the letter “t”, I am able to see my site via dreamweaver cs5…i.e. if I click on the index.php it does bring up my website – however for the life of me, when I try to log in to want to do some editing…it doesn’t allow me to…I type in http://localhost/mysite/wp-admin and the normal WP login box does appear, I input my admin name and password and it doesn’t go any further… Any pointers? Please mail to me at: tioleo55@gmail.com

  42. Learn How to Install WordPress on Dreamweaver in Less then 3 minutes

    http://youtu.be/EiPl9kXIDy8

  43. step 10(fig2, page 2): …..”In the yellow box, click Reload the privilege Link”
    This does not exist.
    Step 1(page 3): “type http://localhost/blog. …and offers to create for you”
    IT DOES NOT OFFER TO create.

    i really appreciate if someone correct the above errors.
    thanks

Leave a comment

Your email address will not be published.


*