First, open your web browser and visit http://localhost/phpmyadmin. All of your website databases will appear on the left hand side. When DesktopServer creates or imports a new WordPress website, it chooses a name based on the first few characters of your website’s domain name, followed by ‘db’ and a few random characters. For instance, the website www.example.dev might have a database name of ‘exampleDBxyz123′. You can be absolutely sure by checking your website’s wp-config.php file for the line that defines the DB_NAME value. When you find your database, click the link on the left hand side.

Now that your database has been selected, a list of tables should appear as links on the left hand side. Locate the wp_users table and click the link. Next, the contents of the wp_users table should appear displaying users. Find the line listing the user you want to change the password for. You can use the user_login or user_email columns to help you locate the user. In our example, we have only one user, ‘admin’. Click the left most edit link to modify this user’s password.

A detail page will appear when you click the Edit link for a given user. In the first column, look for the row titled ‘user_pass’ and set the drop down combo box value to MD5 for the function column. The value column will contain your current password in an encrypted form. You can replace the contents of the value text field with your new password. Simply type it in plain text. Lastly, click the ‘Go’ button. The MD5 setting in the drop down combo box will automatically scramble and secure the password for you.

You can now visit your WordPress website’s login page and enter your username and new password to login.

NetBeans IDE

But first, why NetBeans? NetBeans is a mature editor with years of refinement under its belt. While NetBeans is a serious and optimized editor for C++, Java, and PHP coding, beginners will appreciate the straightforward and simple features. Hardcore developers will appreciate the lighter runtime and active community support for PHP (unfortunately, development has stalled for the heavier Eclipse editor for PHP). Since WordPress ‘template tags’ are just PHP functions, NetBeans makes working with WordPress powerful yet elegant. It provides code hinting to predict your needs and help correct your mistakes. For instance, it underlines and changes the font color to make errors obvious. NetBeans tries to understand your code, not just allow you to edit it. A built-in navigation panel allows you to walk through HTML elements, CSS elements, and blocks of PHP code to simplify the critical task of just finding things. Code folding makes reading long complex template documents a breeze by summarizing lines of code into convenient rollovers. This makes it much easier on the eyes (and the brain) by simplifying complex document parts into smaller ‘folded’ excerpts. Given the right key combinations, NetBeans will even write code for you.

Getting Started

To get started, you will want to visit the NetBeans download page at (http://netbeans.org/downloads/index.html) and install the version specific for PHP and your computer platform (support for both Mac and Windows). The installer is typical and straight forward. Simply install using the defaults. After installing NetBeans, take a moment to configure a few more options that will make working with NetBeans even better.

First, make sure you have checked the ‘Enable debug services’ check box in DesktopServer. You can find this setting in DesktopServer’s first main menu option ‘Stop or restart…’. Be sure to select the ‘Restart’ option followed by clicking the ‘Next’ button. Then start NetBeans for the first time and visit the options panel via the pull down menu for your platform: The NetBeans → Preferences on Mac OS X, or Tools → Options menu on Windows.

The NetBeans options window will show a number of tabs and sub-tabs. Click the PHP section followed by the Debugging sub tab. You will want to uncheck the ‘Stop at First Line’ check box followed by check marking the ‘Watches and Balloon Evaluation’. You can safely ignore the dialog box that appears regarding stability issues with NetBeans. For the most part, debug services outweigh any stability issues that you might encounter. Most issues that we had were purely aesthetic and rare at that. Click OK to close the window and the options panel.

Import Your Project

If you haven’t already created a project, take a moment to try the simple www.example.dev website as outlined in “Getting Started with DesktopServer”, steps 1 to 10. Importing your existing project into NetBeans is easy. Use NetBeans’ File → New Project pull down menu to open the New Project dialog. Select the option ‘PHP Application with Existing Sources’, then click the ‘Next’ button to continue.

NetBeans will prompt you for the source folder of your existing WordPress website. Navigate to the root folder by clicking the ‘Browse…’ button and selecting the source folder. Be sure to double-click the source folder (it should contain the wp-content folder). I.e. double-click the www.example.dev folder, followed by clicking the ‘Open’ button. By default, DesktopServer uses PHP 5.3 to match the most common hosting provider configurations found on the Internet today. Be sure to click the drop down combo box for the PHP Version and select PHP 5.3. Click the ‘Next’ button to continue.

DesktopServer will personalize your website project with its own isolated, unique domain name (on top of the fake .dev top-level domain). Be sure to remove the ‘localhost’ in the http://localhost project URL. This will allow you to properly launch, view, and debug your project from NetBeans’ toolbar. In our example, the project URL should simply read http://www.example.dev. Lastly, click the ‘Finish’ button and NetBeans will begin scanning and indexing your website for fast search and project navigation. You will be able to quickly find template files, functions and work on all your website files faster when indexing completes (a progress bar may become visible in the lower right hand side until indexing completes).

Set the main project you are working on by right clicking your project’s domain name and selecting ‘Set as Main Project’ from the pop up context menu. Your selected project will appear in bold. You will want to use the ‘Set as Main Project’ option to take advantage of NetBeans’ exclusive debugging features which we will cover later in this post. Each time you close and then re-open NetBeans, your last open project and any files that you have open will automatically be displayed in the main document editing area. Window positions and any panels that you have sized to your preference will also be restored automatically. You can rearrange and size the window and panels to your liking. To reset the user interface to the default, simply select the Window → Reset Windows pull down menu.

Editing Features

Get ready to take advantage of some fast, professional development features! NetBeans is a full featured yet free IDE (Integrated Development Environment). But don’t let the free price fool you. It is a powerful environment that rivals expensive editors that cost hundreds of dollars. In many ways, NetBeans performance and features are unparalleled. Now that you have your project open in NetBeans, you will want to familiarize yourself with the editing features. Like most standard text editors, you can use the File and Edit pull down menus to open, close, and edit files. However, NetBeans offers a more powerful way to work with your website files by displaying the ‘Projects’ tab in the upper left hand side. The Projects panel contains a tree structure that shows you all your files and folders. You can easily navigate the tree structure to open a file (via double-click) or copy, rename, create new, or delete files (via a right-click pop-up context menu). Below the Project panel, you’ll find a special Navigator panel that can help you navigate complex template files. Click the image below for a larger view of the index.php file from our example website. Here, we’ve opened our index.php file from WordPress’ default Twenty Eleven theme. This file lives in our example site folder at www.example.dev/wp-content/themes/twentyeleven/index.php. Locate the index.php file using the Project panel and double-click to open it. The Navigator panel should appear revealing HTML elements that are present in the file as an easy to read tree structure.

You can use the Navigator panel to quickly find elements (or PHP functions and classes for code gurus) in your template files. Simply expand the HTML tree branch in the Navigator panel to show the child elements. Double clicking the elements will move the cursor in the code editor area and highlight both the starting and ending tags in yellow. This makes locating broken elements a breeze and traversing unfamiliar theme files easier. If your template pages are feature packed or lengthy, you can give your eyes (and scroll bar) a rest by leveraging “code folding”. Code folding allows you to summarize blocks of code into one line to reduce the complex appearance of your documents. Your complete document is preserved, but the line numbers are literally skipped from view and represented as an excerpt. Leverage code folding by clicking the +/- symbols (to the right of the line numbers, left of your document’s actual code). As a shortcut, you can collapse or expand your entire document at once via the pull down menu View → Code Folds. This will allow you to drill down and reveal just the pertinent areas of the file you want to focus on or quickly expand your document to show every line number. A convenient rollover feature allows you to peek inside of code folds by simply hovering the mouse pointer over a collapsed region. Code hinting features are very straight forward: just type and NetBeans will pop up suggestions to auto-complete and write code for you. For instance, if you type within the PHP code blocks wp_ and then pause, NetBeans automatically pops up a selective list of WordPress API functions (which begin with wp_). If you desire, you may select from the list using your arrow keys and just press the enter key. Your cursor is automatically positioned within function parameters for you to continue typing along. If you write your own PHP functions, NetBeans will remember them and suggest them within the context of your project. NetBeans actually tries to understand your code and predict your needs.

Search Everything

Search is essential to a powerful editor and NetBeans provides four essential search features. First, the typical in-file search is available (via Ctrl+F on Windows or Command+F on Macintosh). This will help you locate items in the open document, much like any text editor or word processor. Second, you can search within a group of files or within the entire project by right-clicking a folder in the Project panel and selecting ‘Find’ from the pop up context menu. You will be able to quickly search all files within the given folder (and sub folders) for a specific word in an instant. Files matching your search criteria appear in the Search Results panel at the bottom. The Search Results panel displays a convenient list of files with expandable details to show line numbers, cursor positioning and even a little excerpt of where the match exists. Double clicking any of the results immediately opens the file for editing and positions your cursor at the exact location of the successful match. Like in-file search, you can specify case sensitive matching, regular expression pattern matching, and other criteria to help you pinpoint what you are looking for.

NetBeans offers two more search / navigation features specifically for PHP developers. The “Go to Declaration” and “Find Usages” context menus. Simply right-click any PHP function to display the pop up menu. As the name implies, the Go to Declaration menu item will search your entire project for the declaration of a function. This is good for locating items in functions.php or a plugin if your template or plugin development consists of a unwieldy number of files. The complimentary Find Usages menu item conveniently locates everywhere that a given function is being used. In our example image to the right, we’ve opened up the index.php file in WordPress’ default Twenty Eleven theme and right clicked the function “twentyeleven_content_nav”. The function is used to display the content navigation links on the web page. Clicking the Go to Declaration menu will immediately open the functions.php file and position the cursor where the function is defined. Likewise, the Find Usages menu will display a Usages panel which is similar to the Search Results panel when using NetBeans’ Find feature. A list of files, followed by line numbers and quick excerpts displays in the Usages panel allowing the developer to quickly access all the occurrences of where the function is being used. This is especially useful if you have decided to rename something and would like to locate any and all references where the old name is still being used. Search is complimented with a fast and efficient Replace feature should you decide to do bulk renaming across files and folders (accessible via the Edit pull down menu). NetBeans makes searching and navigating a WordPress website’s files fast and easy.

Debugging with NetBeans

This next section covers features for web designers familiar with PHP and for web developers that wish to take their programming skills to the next level. After all, WordPress’ template tags are merely a collection of PHP functions and many designers are already familiar with theme frameworks that leverage hooks and filters. Surprisingly, not all programmers use a debugger as setup is often a challenge. Using DesktopServer with NetBeans eliminates the setup challenge (no need to configure files manually, ports, or install additional software). For those of us that can’t keep all the details in our head or need a hint or just want to know what the hell is going on, the debugger is irreplaceable. While there isn’t enough room in this article to cover the nuances of debugging -much less the fine art of programming patterns for easier debugging, I’ll at least define the debugging process while focusing on the goal of simply introducing this useful DesktopServer + NetBeans feature.

Debugging Briefly Defined

To understand the debugger, we first need to cover programming fundamentals: you write instructions like musical notes, and the computer plays them back like a musician reading a score. This analogy could be extended to a needle on a record (remember those?), playing back the recorded musical notes as the record spins. When you alter template files (or any .php files), you are changing the musical notes that are ‘played back’ when the web page loads. For the most part, musical notes are read in order like a book, line by line from top to bottom. Things get complicated when we introduce conditionals (‘if’ and ‘switch’ statements) that can change the position of the needle on the record or line number, or even the current page where we are reading those musical notes. This is where the NetBeans debugger can really help: by stopping the needle on the record and keeping the record from spinning (until we want it too). We are allowed to review the musical notes that have already been played and future notes that are about to be played. By tracing the flow of instructions (‘notes’), we can understand where we are going and how we got there. Which is helpful if we are not seeing what we expected, or if we are just plain lost. As a bonus, the debugger also keeps a journal of where we’ve been and a powerful watch tool to help us if we are out-of-tune or off-key, so to speak.

Starting the Debugger

So let’s get started! First, you will want to begin by creating a ‘breakpoint’. A breakpoint is simply a location in our PHP file that defines a line number where we want to pause execution (or in our record player analogy, stop the needle from playing more musical notes). Setting a breakpoint is easy, just click the line number that contains PHP code and the entire line will change from a white background to red. The red line is an indicator of a breakpoint. To follow along with the image to the left, open WordPress’ default Twenty Eleven theme folder and create a breakpoint on line number 22 of the index.php file (i.e., at /wp-content/themes/twentyeleven/index.php). Second, click the ‘Debug Main Project’ button on the toolbar. This button appears to the right of the green arrow icon. The green arrow button is also known as the ‘Run Main Project’ button, which only starts your default web browser (if it isn’t opened already) and visits your site’s homepage. No big deal there. You could have just as easily opened your web browser and typed in the URL to your website. The second button is much more important: ‘Debug Main Project’ because it changes NetBeans from an editor to a debugger.

Once in debug mode, the extra debug buttons will appear on the toolbar and your default web browser will open. Your browser will appear as if it is loading forever (this is because we’ve paused the record). Switch your focus back to NetBeans and you will notice that the editor is in debug mode. The additional ‘step’ icon buttons should appear along with a green line where the red line for our breakpoint formerly resided. The green line represents the ‘instruction pointer’ (or needle in our record player analogy) showing us the next line of code to be run. You’ve now stopped on your first breakpoint and can try to inspect what WordPress is doing internally, such as variable values and the call stack (the journal or where we have been). With NetBeans in debug mode, look for the Variables panel. By default, the Variables panel should appear as a tab at the bottom of NetBeans’ main editor window. Follow through with step 4 (as shown in the image above) and right-click within the Variables panel and select ‘New Watch…’ from the context pop-up menu. A dialog box should appear allowing you to type in a variable to inspect the contents. In our example, we typed in the global $post variable to see the current post being accessed in WordPress. The Variables panel will update and show us the variable contents. Since the $post variable is actually an object containing other public PHP properties, it will appear as a tree structure that you can click to further expand and see its contents. You can remove the variable by right-clicking $post in the list and selecting ‘Delete’ from the pop up context menu.

You can only inspect variable contents while the instruction pointer is paused on a breakpoint. Your web browser may appear blank or to have stalled, waiting for the rest of the webpage to load. To complete the webpage loading (or continue our record playing music analogy), click the Continue button. The Continue button appears as the green circle with a right facing arrow to the right of the Debug Main Project button. NetBeans will finish transmitting the entire webpage to your browser and the page should render. Using the Continue button does not stop NetBeans’ debug mode. If you click ‘reload’ on your web browser or type the URL to a web page that stumbles across the same breakpoint, the instruction pointer (record player needle) will pause playback on the same breakpoint. Your webpage will appear loading indefinitely and you can inspect variable values again or click Continue to resume playback. To switch back to editing your documents and exit NetBeans’ debug mode, use the Stop Debug button. Stop appears as a red square with a white center and returns NetBeans to editor mode. Editor mode is where you can safely make changes and see them reflected the next time you visit your web pages or start the debug process again. So far we’ve covered the first four buttons on the debugger toolbar:

Going Step By Step

The additional step buttons on the tool bar are equally important to debugging and each restarts then pauses the playback of our ‘record player’ but with subtle differences. To understand the differences, we need to go back to our basic programming fundamentals again: PHP code is often written in titled paragraphs (known as functions) that are re-played by simply referring to the paragraph title (the function name). Calling the function by name repeatedly allows PHP programmers to invoke the same paragraph of behavior without having to re-write the entire paragraph over and over. In fact, most of WordPress is simply functions that call other functions and so on. Keep in mind that those function definitions may exist in other PHP files throughout your WordPress project. For convenience, the NetBeans debugger provides the Step Over button as the first step button on the toolbar, just to the right of the Continue button. Pressing the Step Over button will advance to the next line of PHP code (usually in the current file you are viewing). Step Over will skip jumping to other functions and stepping through their lines of code (and avoids opening up the other files containing function definitions). The lines of code for the called functions still get processed (as with all the debugger buttons), but we just don’t have to go through every line of code and open all their associated files, which can quickly become cumbersome.

In contrast to the Step Over button is the Step Into button. Unlike Step Over, Step Into will show us every line of PHP code the instruction pointer processes. The button will ‘Step Into’ every function definition’s lines of code. If a function is defined in another file and is not a native PHP function (PHP’s basic built-in vocabulary), the Step Into button will automatically open and load the file where the function lives and place the instruction pointer on the first line within the function definition. More often than not, functions usually call other functions, which call other functions, and so on. With function definitions spread across multiple files, things can get complicated rather quickly.

Thankfully, NetBeans provides another window panel to help sort out called functions and their files: the Call Stack. By default, the Call Stack appears while NetBeans is in debug mode just below the main editor window as a tab next to the Variables panel. It is like a journal that shows us a list of files loaded along the way to our breakpoint. The Call Stack shows listings such as plugin files that loaded and their processed order. The list is similar to the browser history of clicked hyperlinks in your web browser. Ever wanted to know which plugin files are loaded first or at all? Check the Call Stack. You can double-click any of the entries in the Call Stack list and the given PHP file will open and the cursor will automatically be placed on the last line number that the file processed before calling another PHP function in another PHP file.

The second to last button in the debug toolbar group is the Step Out button. It provides a convenient way to ‘Step Out’ of the current child function and pause immediately within the parent calling function. It acts like the back button on your web browser by taking you back to the original calling function. Lastly, there is the Run to Cursor button. As the name implies, this button works like the Continue button by letting the instruction pointer progress to where ever our blinking cursor is positioned before pausing again. You can use the Run to Cursor button by placing the cursor on a line ahead of the instruction pointer’s current green line (the line must contain valid PHP code). After placing the blinking cursor on another line, press the Run to Cursor button and the instruction pointer will advance until it reaches the blinking cursor. If the cursor does not contain PHP that the instruction pointer will pass through, the effect is the same as the Continue button. The Run to Cursor button is great for stepping through multiple lines of code to reach what you consider is important to walk through. It also makes cycling through loops easier. As we mentioned earlier, the computer reads our PHP scripts much like a musician reads music note by note, line by line. Repeatable lines of music sometimes accompany music scores in the form of ‘repeat barlines’ and ‘volta brackets’. Don’t worry if you are not familiar with music scores. As a developer, you should simply know that PHP includes special statements for loops, and conditionals (‘if’, ‘switch’, ‘while’, ‘for…’, etc.) that influence which lines of code get processed next. One of the most important loops that you should familiarize yourself with is the post loop (a.k.a. The Loop in the official codex). You can use the step buttons to follow the instruction pointer along and see how loops get processed and how the instruction pointer moves through files which can help you find problem areas.

Debugging Tips

Here are some tips that can help make working with the debugger easier.

• You can only create breakpoints on lines that contain PHP code. If you would like to create a breakpoint on an arbitrary line, you can always try placing a non-trivial PHP code block to set a breakpoint on a line, such as: <?php $x = 1; ?> followed by clicking the line number to set the breakpoint.
• Keep in mind that you can create breakpoints even during debug mode. If you step past a line of interest, simply go back and click the line number to create a breakpoint. You can then restart debug mode by using the Stop and Debug Main Project buttons.
• Running in debug mode is slower than simply visiting the website with the debugger stopped because NetBeans must gather extra data. However, you can still gauge relatively slow parts of your program (or plugins) by setting multiple breakpoints and using the Continue button to estimate the length of time before breakpoints turn from red to green.
• Breakpoints are preserved even after you close and re-open files. To clear all breakpoints in a given project, use the Breakpoints window panel that is accessible via Ctrl+Shift+5 or via the pull down menu:
  Window → Debugging → Breakpoints.
• You can add a variable to the Variables panel quickly by simply placing the cursor on the variable and pressing Shift+Ctrl+F7 on Windows or Shift+Command+F7 on Macintosh. You can also right-click and select ‘New Watch’ to watch the variable contents in the Variables window panel.
• WordPress has dozens of global variables (see http://codex.wordpress.org/Global_Variables) that you can use and examine. In some cases, you may need to prepend the ‘global’ statement to gain access. For instance, choose a location for your breakpoint and prepend the PHP block  before the breakpoint and you will be able to add the $wp variable to your Variables panel to view its contents.
• Some WordPress template tags and functions have return values, while others echo them out to the display. Often times there is a return value equivalent of the same function or an option parameter that you can pass to get a return value (i.e. see wp_list_categories ‘echo’ parameter). Casting a return value into a variable can assist in viewing the contents in the Variables panel. You could cast a return value from a function into a variable such as $x = get_bloginfo(‘name’); (versus using the echoing version of the same function bloginfo(‘name’); ) to find out the value.
• For additional information specific to NetBeans debugging with PHP, see Debugging PHP Source Code in the NetBeans IDE at http://netbeans.org/kb/docs/php/debugging.html.

Conclusion

NetBeans is a free yet elegant code editor that supports powerful features often reserved for expensive commercial products such as code folding, a code navigator, and project manager. It tries to understand your code by providing predictive code hints and highlighting errors. NetBeans also includes important search features that support selective pattern matching, advanced regular expressions, and search & replace (either globally, locally or with a custom filter). When coupled with DesktopServer, NetBeans provides a strong debugging tool. However, we have only scratched the surface of NetBeans as there are many more powerful features that we have not covered: such as Git/SVN/other source code integration, differencing, unit testing, code profiling, refactoring and MySQL integration to name a few. NetBeans can scale well for beginning development professionals to seasoned development masters and is able to assist you more and more as your skill level improves and project needs increase. For instance, you may wish to add WordPress specific templates to NetBeans or leverage NetBeans’ plugin repository to make PHP documentation one click away. The amazing NetBeans IDE is free, fast, lightweight, and even easier to use when coupled with either the free or premium version of DesktopServer. NetBeans is well worth the download even if you only use a fraction of its features. Give it a try!

Check out the WordCamp San Diego 2012 pages for more information on what you can expect from WordCamps. You can find links back to WordCamp central and where to find WordCamps in a city near you. Hopefully we’ll be there to meet you too! Please visit http://2012.sandiego.wordcamp.org/about/ to learn more.

1. Create an Empty Database
2. Export Your Development Website
3. Upload Your Website Data

Step 1 – Use cPanel to Create an Empty Database

WordPress separates style and content by storing page and post content in a MySQL database. This requires that you create an empty database for storing your website content. Thankfully, cPanel makes it simple to create a new database for your content.

First login to cPanel, navigate to the Databases section and click on the icon titled “MySQL Database Wizard”. The database wizard will allow you to quickly do the following:

• Create a database and name it.
• Create a username for the database.
• Specify a password for the database.
• Grant the username privileges to the database.

After clicking the “MySQL Database Wizard” icon, you can then specify your database name. Your database name may be prefixed with your cPanel account username followed by an underscore. Be sure to record your complete database name with the prefix and underscore (i.e. scarroll_example). Click the “Next Step” button to continue.

Next, you will be prompted for a database username. Like the name of your database, your chosen database username maybe prefixed with your cPanel account username followed by an underscore. For simplicity, you can use the same name for both the database username and the database name (this will also make it easier for phpMyAdmin to manage). Next, specify a password or click the “Password Generator” button to have a password generated for you. Click the “Create User” button to continue.

Be sure to record your database name, username and password on the following screen as you will need this information when exporting your website from DesktopServer. Lastly, you will see the privileges section. Simply click the “All Privileges” checkbox as WordPress will need all privileges to work effectively. Click the last “Next Step” button to finish and complete the MySQL Database Wizard.

Now that you have an empty database created on your live server with valid credentials, your next step will be to give the database credentials to DesktopServer’s export process. This will allow DesktopServer to prepare a copy of your wp-config.php file for hosting on your live server.

Step 2 – Use DesktopServer to Export Your Development Website

Provide those user credentials you recorded from your live server in step 1 to DesktopServer so that we can create an export that will work on your live server.

First, start DesktopServer and select the last option to “Export or import a website”, followed by the “Export a website archive” option. Clicking the “Next” button will take you to the export options screen.

The export options screen will display a drop down list of websites that you have created on DesktopServer. Select the website that you want to export to your live server followed by the database name and credentials you obtained using the MySQL Database Wizard. Unless you were provided with a specific host, be sure to type localhost for the “Host” field. Then click the “Next” button to continue.

Lastly, you will need to provide the live server domain name that users will use to reach your site. Be sure to include the valid TLD (top level domain) extension (i.e. www.example.com, postmy.info, testing.co.uk, etc.).

Click the “Next” button and DesktopServer will start exporting your website, replacing .dev with your chosen top level domain in the database and php files. You will see a link to the folder containing your file archive. The archive will contain your complete WordPress website which includes the WordPress core files, themes, plugins, and a complete export of your database as a text file called database.sql.

Step 3 – Upload Your Website Data

Deploying your website manually is a simple two-part process: 1) Import your database and 2) Upload your WordPress files. We will start with extracting the database.sql file from our archive. Decompress the archive file by double clicking it (on Macintosh) or right-clicking it and selecting “Extract All…” from the pop-up context menu (on Windows). Open the extracted folder and move the database.sql file to the desktop or a new place by dragging it from the folder.

Your database.sql file may be large if your website has a lot of posts and pages or uses third-party plugins to store an extensive amount of data (i.e. real estate listings, list of products for eCommerce, etc.). In either case you may wish to compress the database.sql for faster uploading as a separate zip archive. Simply right-click the database.sql file and select the ‘Send To → Compressed (zipped) Folder’ (on Windows) or ‘Compressed “database.sql”‘ (on Macintosh) from the pop-up context menu. It is important to make sure that the file name ends with a “.sql.zip” otherwise cPanel’s phpMyAdmin may not know what to do with the file. By default, Windows renames the file and removes the sql extension to read just “database.zip”. Windows users must rename the file (right-click and select rename) to database.sql.zip for compatibility.

Import Your Database

Now go to your live website’s cPanel and click on the phpMyAdmin icon. phpMyAdmin should appear and present you with a list of databases on the left hand side. Select the database by the name you used in Step 1. Be sure to select your database first as we’ll be uploading the database.sql.zip file and it is important to have the proper database selected. Next, click the Import tab at the top of the phpMyAdmin page, followed by the “Browse” button and select the database.sql.zip file. Lastly, click the “Go” button to begin uploading and importing your data into your live website database.

Upload You WordPress Files

Next, you will need to upload your WordPress website files and folders. Once again, cPanel makes this incredibly easy and significantly faster then having to use a client FTP program. You will be able to take advantage of maximum compression without having to wait on uploading multiple files because cPanel will allow you to use the server to decompress and move files. Start by going back to your extracted folder from your website archive. This folder will be much smaller since you’ve moved the database.sql file out of it. Before compressing it, be sure to move or discard the original website archive that contained the database.sql file to avoid confusion (as it will have a similar .zip name). To re-compress the extracted folder that has only your WordPress website files (minus the database.sql you moved out), right-click the folder and select the ‘Send To → Compressed (zipped) Folder’ (on Windows) or ‘Compressed’ (on Macintosh) from the pop-up context menu.

After compression, you can upload the file using cPanel’s File Manager. Select the File Manager icon from cPanel and select your website root folder. The website root folder is usually labeled www or public_html. You might have both folders where one is simply an alias for the other. Highlight the folder in the left hand side of the File Manager and select the “Upload” icon from the toolbar.

Clicking “Upload” will cause File Manager to present you with a webpage to upload your website archive file. Click “Browse” and select your file. A progress bar will automatically be displayed indicating the progress of your upload. The status will change to “Complete” when the upload has finish. After the file finishes uploading, go back to File Manager’s list of files. If the uploaded archive isn’t initially visible, try the “Reload” icon above the list of files.

Next, find and click the archive file to highlight it. Use the “Extract” icon on the button toolbar to extract the contents of the website archive. By default, the contents of the file will be extracted to a folder with the same name as the archive file. You may need to wait while the server extracts the files. If the folder does not appear visible, try the “Reload” button above the list of files.

You will need to move the contents of the extracted files folder to the site root. cPanel makes moving the files easy. Select the extracted folder in the folder list (left hand side) or double-click the extracted folder in the file list view (right hand side in the File Manager) to view the list of extracted files. With the folder contents revealed, simply click the “Select all” button above the list of files followed by the “Move File” icon on the icon toolbar. Use the backspace (delete on Macintosh) key to correct the folder path to read /public_html/ as we will want to move the files to the site root.

After moving the files to the correct location, you can discard (delete) the website archive along with the extracted folder by simply highlighting (click) the items in File Manager and clicking the “Delete” icon (red ‘X’) on the icon toolbar. You should now be able to visit your website’s home page (i.e. http://www.example.com). However, you may need to first update your .htaccess file by re-saving your permalink settings from WordPress’ admin pages. To access WordPress’ admin pages, visit the sub-folder ‘wp-admin’ (i.e. http://www.example.com/wp-admin). Go to the Settings → Permalinks menu followed by clicking the “Save Changes” button. If you are installing a WordPress multisite, you may need to update your .htaccess file manually by visiting the Settings → Network Setup menu and updating the .htaccess file with the suggested settings found there. You can use cPanel’s File Manager to edit any PHP file by selecting the file and using the “Edit” icon on the toolbar. By using DesktopServer’s export functions to prepare your website along with cPanel’s built-in File Manager, you can speed deployment of your complex or larger WordPress websites on a live server without any extra tools or utilities. Equipped with this experience and knowledge will make you a more skilled and valuable WordPress developer. You will be able to take on larger projects on a multitude of professional hosting providers that support the cPanel interface.

Troubleshooting

Error establishing a database connection – This is an indicator of an incorrect username, database name, or password in the wp-config.php file. You can correct and/or double-check these items from within File Manager. Simply find the file using cPanel’s File Manager by clicking the public_html folder from the folder list (left hand side of File Manager). Select the wp-config.php file in the file list and click the “Edit” icon on the toolbar to edit the file contents on the live server. An editor will appear that will allow you to edit the file contents. Look carefully at the definitions for the DB_NAME, DB_USER, DB_PASSWORD and DB_HOST. You can save changes via the “Save Changes” button in the upper right hand corner of your web browser.

You will have to turn on hidden files if you need to open the .htaccess file manually to edit it. The opportunity to show hidden files is shown when first you click on the File Manager icon in cPanel. A prompt will ask you if you want to see hidden files or if you want to dismiss the prompt in future sessions. To reset the prompt and to see the view hidden files checkbox again, use the reset interface link in cPanel.

A new version of DesktopServer (version 3.3.1) is now available in our downloads section. This version includes critical and important updates to both our free DesktopServer Limited and DesktopServer Premium version.

Update Instructions

1. First, you must stop web and database services using DesktopServer’s first option “Stop or restart the web and database services”, followed by “Stop the web and database services”. Once database and web services have stopped, be sure to close the DesktopServer application.
2. Download the ZIP archive for your specific platform (Windows or Macintosh) with the ‘Update Only’ option from our download page.
3. Replace the main application program inside your current server folder by first deleting the existing DesktopServer application file (drag only this single file to the trash):
1. For Mac, first drag only the existing “DesktopServer.app” to the trashcan, you maybe prompted for your password.
2. For Windows computers, first delete only the existing “DesktopServer.exe”.
3. Next, move the new DesktopServer and Update folder to your c:\xampplite (Windows) or XAMPP (Macintosh) folder.
4. Start the new DesktopServer application. The contents of the Update folder will automatically be merged with your current installation and may take a several minutes to complete. Once complete, DesktopServer will restart.

Change Log

This version (3.3.1) includes the following updates:

• New Blueprints option for non-WordPress sites (the ‘Version’ label has been replaced with ‘Blueprint’).
• New support for native language WordPress in the blueprints folder. Tested with French, German, Spanish, Latvian.
• Now includes WordPress 3.3.1 core files in the blueprints folder.
• Additional fixes for Dreamweaver Live View modes to support child themes.
• Additional fixes for import on Windows based system (better memory management).
• Fixes for MySQL on Macintosh to clear tmp folder when selecting ‘Stop the web & database services’.
• Fixes for PHP on Windows to clean up sessions when selecting ‘Stop the web & database services’.
• Fixes importing or creating a website on partitions other then C:\ drive on Windows based systems.
• Note: Email settings will be overwritten. You may update accordingly.
• Fixes attempts to create a site name beginning with a period or dash.

The Live View feature is a much-needed update to Dreamweaver’s original Live Data mode in Dreamweaver CS3. Although DesktopServer’s extended features will also work with Dreamweaver CS3′s older, dated embedded browser (aka Live Data mode), WordPress designers will benefit the most from the latest version of Dreamweaver CS5.5 which includes a cutting edge WebKit based browser rendering engine as well as support for multi-monitor workspaces. In this guide, I’ll show you how to streamline your design environment for working with Dreamweaver and WordPress.

Enable Dreamweaver Support

When you start DesktopServer Premium version 3.3 for the first time or after selecting the first option to “Stop or restart web and database services”, you will see a new checkbox that is titled “Enable Dreamweaver support”. When turned on, DesktopServer will perform extended rendering when viewing WordPress template pages directly in Dreamweaver. That is to say, template page files will render in Live View that exist in your wp-content/themes/[active theme] directory where [active theme] is your currently selected and activated WordPress theme folder. DesktopServer will also automatically create a Dreamweaver compatible site definition file when creating a new website, copying an existing website or importing a website archive (zip file). You can find the file in your website’s folder named as “dreamweaver.ste”. (i.e. ../Websites/www.example.dev/dreamweaver.ste). When exporting your website, DesktopServer will omit this file so you won’t have to worry about security risks (as the file might pose a security risk by revealing your server’s file paths to potential hackers). If you transfer your files to your server by another means, be sure to omit this file or simply delete it after importing your site into Dreamweaver as it isn’t needed after import. If you already have your website defined, you can manually create a site definition for your existing website by seeing my post titled, How to Add a Dreamweaver Site Definition for a Website.

If you haven’t created a website yet, simply follow the directions in the post Getting Started with DesktopServer. Next, locate the dreamweaver.ste file in Finder (Mac) or Explorer (Windows) and double-click the file. Dreamweaver should start and automatically import your site and display the Manage Sites window or alternatively, you can import it using Deamweaver’s Site → Manage Sites pull down menu, followed by clicking the Import button. You can delete the dreamweaver.ste file after importing it into Dreamweaver. The imported site definition file will automatically configure Dreamweaver to use DesktopServer as a testing server, pre-configured for a MySQL and PHP setup and to support Dreamweaver’s Live View mode. From the Manage Sites window, you can click the Edit button to view the configuration options or define additional servers to sync with.

Enable Code Hints

Adobe Dreamweaver CS5 now includes PHP code hints optimized specifically for WordPress. To enable this feature, all you need to do is enable the Dreamweaver code hints configuration file. Just select the pull down menu Site → Site-Specific Code Hints to bring up the Site-Specific Code Hints dialog box. You will see a drop down combo box labeled “Structure” from which you can select the WordPress option. Ensure that the site root is selected (as shown in the image on the left) and click the OK button. Dreamweaver will automatically scan your site and provide code hints for clue insights into WordPress’ Template Tag API and proper syntax. To use code hints, simply begin typing a few letters of the WordPress template tag inside a valid PHP block followed by pressing Ctrl+Space bar. For example, with the cursor position right after the underscore in the code block <?php get_ ?> press the Ctrl+space bar key combo and a popup list will appear containing a matching set of  WordPress template tags that begin with “get_”, such as get_header, etc. Code hints can eliminate a lot of guess-work and speed your development process by providing an instant reference without having to look up template tag syntax on the web.

Using Dreamweaver and WordPress

Now that Dreamweaver is properly configured, you can jump right into design and editing. Use the File window/panel in Dreamweaver to select the WordPress website you wish to edit. In Dreamweaver CS5.5′s default workspace, you can find the panel in the lower left hand side with a drop down to select from a list of sites. Select the site you have just imported and navigate the file tree (click the thumbnail to the left and see #1). To view your site as a visitor would, go to the root of your website and locate the index.php file. There are many index.php files in a typical WordPress installation, but we are concerned with the one that lives in the root of your website. It will be in the same folder as your wp-config.php file. Open the file and switch your editor to Split or Design view mode using the toolbar. Next click the Live View button and you should see your website displayed in Dreamweaver’s Design View area (see #2 in the image for the Design View area). Unlike a real web browser, the hyperlinks in Design View are disabled and the render is only an estimation of what a visitor would see. Use the Preview icon (the earth globe icon) on the toolbar to launch your web browser and see your site in an actual web browser.

DesktopServer’s real power is the convenience feature of viewing your theme files directly [and] …using Dreamweaver’s Inspect toolbar button to analyze elements and their corresponding code.

DesktopServer’s real power is the convenience feature of viewing your theme files directly. For instance, you can open your theme’s header file directly by navigating to your active theme’s header.php file. The file would be located in a sub-folder of your active theme in the wp-content/themes folder path. In a typical web server, opening your theme files directly would produce an error and Live View would fail to deliver anything useful. DesktopServer compensates by acknowledging Live View and attempts to apply your style.css file to your template files dynamically as well as attempting to load various WordPress modules to assist you with design time feedback. While not perfect, this can greatly reduce the amount of task switching you perform while editing your site. Simply keep in mind that your CSS rules are influenced by element parent and child hierarchies; so not everything may render unless you address the element directly to apply a given CSS style. For instance, the sidebar.php file may not display a background color because the file itself is an include file intended to be embedded inside another file like page.php. Alternatively, you can open the page.php file, single.php, or your theme’s index.php file and see how content is rendered. Another convenience feature is the ability to click various elements in Split view’s Design View area which will cause Dreamweaver to position the cursor in Code View as close as possible to the code that produces the actual output (see #3 in the thumbnail). Especially powerful is using Dreamweaver’s Inspect toolbar button to highlight elements and analyze their corresponding code. This can help you learn what various WordPress template tags output when passed different parameters. As well as isolate and highlight problems or areas of interest. You can view most changes quickly by simply clicking in the Design View area with Live View turned on or by saving your file (Ctrl+S on Windows or Command+S on Mac) and clicking the refresh icon on the toolbar. To enable Dreamweaver’s native CSS panels, you may need to attach the style.css file as a Design Time style sheet. Design-Time style sheets only apply while you are working in the document. Place your cursor in Code View and use the pull down menu View → Style Rendering → Design-time to attach your theme’s style.css file.

The actual content that is displayed in Dreamweaver’s Live View is determined by the currently selected front page. You can change the content output to test different post scenarios by using WordPress’ admin menu under Settings → Reading. Select a different front page and that content will be displayed in Dreamweaver’s Live View rendering. The currently selected content can also influence your CSS rules as WordPress’ template tags are often used to output a value for the body or parent element IDs and class tags in HTML (often the case with the post_class template tag). Be sure to set the front page accordingly to avoid confusion. I found this to be especially true when viewing a single post as the front page but loading a multi-column page template in Dreamweaver (and vice versa). Most everything else rendered accurately, but margins abide by the actual output WordPress produces and any CSS rule that binds to the post_class template tag can change the page’s appearance. Thankfully, you can verify what class and id tags are present along with all output by quickly doing a ‘view source’ using Dreamweaver’s Live Code button.

An alert message maybe displayed about dynamically related files not resolving. This is because Dreamweaver doesn’t understand WordPress’ ability to mask URLs with permalinks. You can safely dismiss this message or switch permalinks in WordPress’ admin menu via Settings → Permalinks and selecting the default option.

You can make dozens of changes to customize and craft your own personalized theme files and view the results quickly with this setup. Development is faster now that you have your WordPress website loaded locally inside Dreamweaver. This guide just scratches the surface to help you get started with a streamlined design and development environment. DesktopServer Premium edition allows you to take your WordPress designs further by unleashing the power of Dreamweaver’s integrated development environment. Now you can customize the look and feel of your WordPress powered websites and view the results even faster.

A new version of DesktopServer (version 3.3.0) is now available in our downloads section. This version includes critical and important updates to both our free DesktopServer Limited and premium member access DesktopServer version.

Update Instructions

1. First, you must stop web and database services using DesktopServer’s first option “Stop or restart the web and database services”, followed by “Stop the web and database services”. Once database and web services have stopped, be sure to close the DesktopServer application.
2. Download the ZIP archive for your specific platform (Windows or Macintosh) with the ‘Update Only’ option from our download page.
3. Replace the main application program inside your current server folder by first deleting the existing DesktopServer application file (drag only this single file to the trash):
1. For Mac, first drag only the existing “DesktopServer.app” to the trashcan, you maybe prompted for your password. Next, move the new “DesktopServer.app” file and the Update folder to your existing Applications → XAMPP folder.
2. For Windows computers, first delete only the existing “DesktopServer.exe”. Next, move the new “DesktopServer.exe” file and Update folder to your c:\xampplite folder.
4. Start the new DesktopServer application. This may take a several seconds to start for the first time. You may be prompted to wait for an additional update to be applied which may take several minutes. Once complete, DesktopServer will restart.

Change Log

This version (3.3.0) includes the following updates:

• New support for Dreamweaver Live Data and Live View modes.
• New support for Dreamweaver site definition files.
• New enable debug services switch with default set to off (enables Wishlist and non-GPL compliant encrypted plugins).
• New MySQL optimizations for Macintosh for improved performance and stability.
• Fixes MySQL thread stack overrun errors on Macintosh when running stored procedures.
• Fixes for security permissions on Mac and allows WordPress to upgrade gracefully.
• Now includes updated WordPress 3.3 core files.
• Now includes updated phpMyAdmin 3.4.9 for both Mac and Windows.

Step 1 – Download Your Website Files

First, you will want to download the files that make up your WordPress website. You could do this with your favorite FTP program. But as we mentioned, we’re going to demonstrate how to do this with cPanel alone. Within cPanel is an icon dedicated to managing your website files. Login to your live website’s cPanel and locate the ‘File Manager’ icon and click it. File Manager is usually found in the group titled ‘Files’.

When you click the File Manager icon for the first time, you should see a pop-up window with the option to display hidden files. We are interested in preserving the permalink settings that are stored in the .htaccess hidden file. However, if you do not obtain this file, you can simply re-save your permalink settings using WordPress’ admin menu Settings → Permalinks. Once the File Manager loads, you will be presented with a list of folders on the left hand side of your screen and the contents of the currently selected folder on the right hand side. The folder containing your WordPress installation may vary depending on how your hosting company chooses to configure their services. Typically, your files will be located inside a folder titled public_html or www. You might have both a public_html and www folder which is okay as one may simply be an alias or “shortcut” to the other.

Click the folder containing your WordPress files for your website (typically public_html folder) and you should see your WordPress website files in the results pane on the right hand side. The right hand side should also contain the files and folders beginning with “wp” such as the wp-content folder and the wp-config.php file. Select all the files that make up your WordPress installation by using the Command button on Mac or Alt+Ctrl buttons on Windows and clicking the various files and folders. WordPress files and folders begin with “wp”. In addition, you should select “index.php”, “xmlrpc.php” and optionally “.htaccess” for permalinks. Once you have selected all of WordPress’ files, select the Compress option to create a zip archive. You will be given a pop-up to select the compression type and input a file name. Select the “Zip archive” (usually the first) option and note the file name or specify one. When the compression operation completes, you can download the archive by selecting it and pressing the download icon on the main toolbar. If you don’t initially see the zip archive file, try pressing the reload icon on the toolbar and locate the zip archive in the results pane. Once you finish downloading the file, unpack the contents and set the folder aside. Don’t forget to delete the archive file from your website as leaving it there might pose a security risk.

Step 2 – Create a Database Export

Next, we are going to want to create our database export file using phpMyAdmin. cPanel usually provides this option under the group heading “Databases”. Click the icon to access phpMyAdmin. If your hosting provider has setup cPanel with the standard options, you should be automatically logged into phpMyAdmin. The first screen you will see in phpMyAdmin should be a list of databases on the left hand side. Select the database that is associated with your WordPress website. If you don’t know the database name, take a peek inside the wp-config.php file that is apart of the zip archive that you downloaded in the first part of this article. Look for the line that begins with “define(‘DB_NAME’,”. The last portion of the database name should match a listing in phpMyAdmin. Click the database name in phpMyAdmin to select it. If phpMyAdmin instead prompts you for a username and password, you maybe able to login using the credentials you find in the wp-config.php file.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'scarroll_postmy1');

The wp-config.php contains the database name.

Locate and click the “Export” option after selecting your WordPress database in phpMyAdmin. The “Export” option can be found as a dedicated menu/tab item at the top of the webpage. With the most current version of phpMyAdmin, you’ll be presented with two options 1) Quick or 2) Custom. In both cases you will want to ensure that the format option is set to SQL.

You can proceed with the easy Quick export option in most cases. If you have a larger website, it maybe more efficient to select the Custom export option and set the additional parameter for “INSERT INTO tble_name VALUES (1, 2, 3)”. In the current version of phpMyAdmin this option is also known as “neither of the above” in the data dump options section. This setting may increase the time it takes for imports to be processed but can also isolate “bad data” or malformed content (possibly from a misbehaving third-party plugin) from interfering with your post and page data. Click the Go button to download the database SQL dump file. After downloading the file, rename it to database.sql and place it in the folder that you set aside in step 1. The folder should now contain all of your WordPress website files in addition to the database.sql file. It is important that the database.sql file is located in the same folder as your site’s wp-config.php file. Now you may zip the folder by simply right-clicking it (Command+Click on Mac), followed by the pop-up menu Send To → Compressed (zipped) folder on Windows or Compress folder on Mac. You will now have a portable zip file containing your entire WordPress website and accompanying database. If you have a lot of media such as video or pictures, you can omit including the wp-content folder in the zip file to save space. All that is essential to create a valid import archive is the wp-config.php file and an accompanying database.sql file. If you do omit the other folders and files, simply be sure to move them over to your website’s folder after the import process completes within DesktopServer.

Step 3 – Import Website

Your last step is to import the zip archive you created into DesktopServer. To get started, select the “Export or import a website” option and click next, followed by the “Import an existing WordPress website archive” option and click next. You can select the zip you created to import as a new WordPress website by simply clicking the first field (Import File). An open dialog window will allow you to locate and select your zip file. Note that Mac users may see their file system as an Administrator which differs from your normal user account. You may need to locate your files by starting with the Macintosh HD:Users path to locate the exact location of your zip archive. The additional fields will allow you to specify a domain name by altering the Site Name field. For security purposes DesktopServer will change the top-level domain to .dev (dot DEV). You can use the browse button to specify a different Site Root to store your website files. Click the Browse button to display a folder selection dialog window if you want to choose a different location to store your website’s files. Lastly, clicking the next button will start the import process and your new website URL will be presented to you on the last screen. Don’t forget to visit your WordPress admin screen and re-save permalinks under the Settings → Permalink menu if you didn’t copy over your .htaccess file. You may need to re-save permalinks if your website’s links don’t appear to be resolving correctly. DesktopServer’s import routine will automatically scrub (search and replace) your links from your live domain name and replace it with your chosen .dev development top-level domain name. If all goes well, you will have successfully re-created your website on your  local machine without the use of a migration plugin.

Updating to WordPress 3.3 is easy. Start by going to WordPress.org and download the latest version of WordPress. Simply unzip it into your blueprints folder as a sub-folder and name it something meaningful (i.e. “WordPress 3.3″). For more information please see our related post, “Using the Blueprints Folder for WordPress 3.3 Beta 1″.

Updating Existing Sites on Mac OS X

In most cases, updating existing websites from 3.2.1 to 3.3 simply involves clicking the “Update Now” notification from WordPress’ administration menu. However, Mac OS X users may encounter a known permission issue “Warning: copy… Installation failed” error. This problem can easily be remedied by refreshing the read/write permissions on your website’s folder (i.e. Documents/Websites/www.example.dev). Visit the folder and control + click (right click) the folder followed by selecting the “Get Info” menu item from the pop-up context menu. Unlock the folder using the unlock icon, followed by the “Apply to enclosed items” drop down menu on the gear icon at the bottom of the window. You should be able to refresh or visit your site’s WordPress admin upgrade page and click “Update Now” at the bottom of the screen (note: if you already attempted this, your admin stylesheet may appear broken but the “Update Now” button is still at the bottom of the webpage).

By default, DesktopServer places your website within a Websites parent folder. It may be more convenient to apply the permissions fix to the parent Websites folder so that all of you sites can be updated without issues.