<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ServerPress.com &#187; IDE</title>
	<atom:link href="http://serverpress.com/tag/ide/feed/" rel="self" type="application/rss+xml" />
	<link>http://serverpress.com</link>
	<description>Developer and Designer Solutions for WordPress</description>
	<lastBuildDate>Sat, 25 May 2013 08:02:11 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Using PhpStorm for WordPress Debugging &amp; Development</title>
		<link>http://serverpress.com/news/using-phpstorm-for-wordpress-debugging-development/</link>
		<comments>http://serverpress.com/news/using-phpstorm-for-wordpress-debugging-development/#comments</comments>
		<pubDate>Fri, 20 Jul 2012 21:47:40 +0000</pubDate>
		<dc:creator>Stephen Carroll</dc:creator>
				<category><![CDATA[How To Tutorials]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[debugging]]></category>
		<category><![CDATA[develop]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[phpstorm]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://serverpress.com/?p=5189</guid>
		<description><![CDATA[PhpStorm is a cross-platform, IDE (Integrated Development Environment) that delivers a feature packed, fast, and efficient user interface for debugging and code editing. As a commercial product, you will find the runtime to be fast and what you would expect from a well written commercial native application. While still requiring a Java runtime, PhpStorm feels [...]]]></description>
			<content:encoded><![CDATA[<p>PhpStorm is a cross-platform, IDE (Integrated Development Environment) that delivers a feature packed, fast, and efficient user interface for debugging and code editing. As a commercial product, you will find the runtime to be fast and what you would expect from a well written commercial native application. While still requiring a Java runtime, PhpStorm feels much faster than eclipse or even the lighter weight Netbeans IDE. Like Netbeans, it works with either DesktopServer Limited or DesktopServer Premium editions. It also provides all the common editing features you would expect to find in a professional IDE: code folding, code completion, debugging with breakpoints and step functions, variable watch lists and inspectors, and multiple disciplines for syntax highlighting (JavaScript, HTML, PHP, etc.) with an emphasis on PHP. Since WordPress &#8216;template tags&#8217; are just PHP functions, PhpStorm can make working with WordPress fast. However, first setup is a challenge as placement of user interface elements is less than intuitive. In this post, I will help you simplify the initial setup process of using PhpStorm with DesktopServer to give you a fast and professional IDE for WordPress development. Once acclimated, users will find debugging quick, robust and even more responsive than Netbeans&#8217; typical debugging sessions.</p>
<p><span id="more-5189"></span></p>
<h4>Getting Started</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/1-Enable-trace-and-debug.jpg"><img class="alignright size-medium wp-image-5205" title="Enable trace and debug services" src="http://serverpress.com/wp-content/uploads/2012/07/1-Enable-trace-and-debug-300x209.jpg" alt="" width="300" height="209" /></a>If you haven&#8217;t already installed PhpStorm, you can find a free, fully functional 30 day trial for either Macintosh or Windows from their website at <a href="http://www.jetbrains.com/phpstorm/">http://www.jetbrains.com/phpstorm/</a>. The installer is typical and straight forward. Simply install using the defaults. To work with DesktopServer, make sure you have checked the &#8216;Enable debug services&#8217; check box in DesktopServer. You can find this setting in DesktopServer&#8217;s first main menu option &#8216;Stop or restart&#8230;&#8217;. Be sure to select the &#8216;Restart&#8217; option followed by clicking the &#8216;Next&#8217; button.</p>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Create New Project from Existing Files</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/2-Create-new-from-existing.jpg"><img class="alignleft size-medium wp-image-5206" title="Create a new project from existing files" src="http://serverpress.com/wp-content/uploads/2012/07/2-Create-new-from-existing-300x209.jpg" alt="" width="300" height="209" /></a>If you haven&#8217;t already created a DesktopServer website, take a moment to try the simple www.example.dev website as outlined in <a href="http://serverpress.com/news/getting-started-with-desktopserver/" target="_blank">&#8220;Getting Started with DesktopServer&#8221;</a>, steps 1 to 10. Adding your existing website to PhpStorm requires a few extra steps. From PhpStorm&#8217;s main dialog, select the option to &#8220;Create New Project from Existing Files&#8221;.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/3-Web-server-local-root.jpg"><img class="alignleft size-medium wp-image-5207" title="Web server local root" src="http://serverpress.com/wp-content/uploads/2012/07/3-Web-server-local-root-300x209.jpg" alt="" width="300" height="209" /></a>DesktopServer will personalize your website project with its own isolated, unique domain name in addition to its own document root. Therefore, when PhpStorm prompts you to &#8220;Choose Your Scenario&#8221;, simply select the first option titled, &#8220;Web server is installed locally, source files are located under its document root&#8221;.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/4-Choose-directory.jpg"><img class="alignleft size-medium wp-image-5208" title="Choose your site root folder" src="http://serverpress.com/wp-content/uploads/2012/07/4-Choose-directory-300x209.jpg" alt="" width="300" height="209" /></a>PhpStorm will then prompt you to &#8220;Choose Project Directory&#8221;. This will be your website&#8217;s site root folder. By default, DesktopServer creates your site root as a folder with the same name as your website&#8217;s domain name and as a sub-folder at ./Documents/Websites. Select the folder and click the &#8220;Next&#8221; button to continue. For our www.example.dev website, we&#8217;ve selected the ./Documents/Websites/www.example.dev folder.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/5-Specify-site-name.jpg"><img class="alignleft size-medium wp-image-5209" title="Specify a site name" src="http://serverpress.com/wp-content/uploads/2012/07/5-Specify-site-name-300x209.jpg" alt="" width="300" height="209" /></a>Next, PhpStorm will ask you to &#8220;Add Local Server&#8221;. You will want to fill out the name field (we use the website&#8217;s domain), i.e. www.example.dev. Then fill out the personalized &#8220;Web server root URL&#8221; field as it was created in DesktopServer, i.e. http://www.example.dev. Note that DesktopServer distinguishes between a www and no-www websites. Make sure that the URL matches that domain name you created in DesktopServer. Click the &#8220;Next&#8221; button to continue.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/5-1-Review-Settings.jpg"><img class="alignleft size-medium wp-image-5234" title="Check the Review Settings checkbox" src="http://serverpress.com/wp-content/uploads/2012/07/5-1-Review-Settings-300x204.jpg" alt="" width="300" height="204" /></a><em><strong>Important! </strong></em><strong></strong>PhpStorm will prompt you to &#8220;Specify a Web Path&#8221;. Leave this field blank, but <span style="text-decoration: underline;">be sure to click the checkbox option to &#8220;Review PHP Settings&#8221;</span>. This is important as we&#8217;ll need to modify include paths to allow DesktopServer to work with PhpStorm correctly. Currently, DesktopServer does not support PHPUnit. We will update PEAR and provide PHPUnit support in a subsequent version. For now, simply click the &#8220;Next&#8221; button to review and modify the PHP configuration to work with DesktopServer and your WordPress development website.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/6b-Review-paths-Mac.jpg"><img class="alignright size-medium wp-image-5211" title="6b-Review-paths-(Mac)" src="http://serverpress.com/wp-content/uploads/2012/07/6b-Review-paths-Mac-300x209.jpg" alt="" width="300" height="209" /></a><a href="http://serverpress.com/wp-content/uploads/2012/07/6a-Review-paths-Win.jpg"><img class="alignright size-medium wp-image-5210" title="6a-Review-paths-(Win)" src="http://serverpress.com/wp-content/uploads/2012/07/6a-Review-paths-Win-300x209.jpg" alt="" width="300" height="209" /></a><em><strong>Very Important!</strong> </em> At this point, PhpStorm should display PHP configuration information. Be sure to modify the include path(s) to match your platform. See the screenshot to the right for your system.</p>
<p>If you are on Windows, remove the &#8216;PEAR&#8217; part and make sure that the include path c:\xampplite\php is present. If you are on Macintosh, remove the /lib/php/pear and ensure that the path to /Applications/XAMPP/xamppfiles/etc is present.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/7b-Set-PHP-to-5.3-Mac.jpg"><img class="alignright size-medium wp-image-5213" title="7b-Set-PHP-to-5.3-(Mac)" src="http://serverpress.com/wp-content/uploads/2012/07/7b-Set-PHP-to-5.3-Mac-300x217.jpg" alt="" width="300" height="217" /></a><a href="http://serverpress.com/wp-content/uploads/2012/07/7a-Set-PHP-to-5.3-Win.jpg"><img class="alignright size-medium wp-image-5212" title="7a-Set-PHP-to-5.3-(Win)" src="http://serverpress.com/wp-content/uploads/2012/07/7a-Set-PHP-to-5.3-Win-300x193.jpg" alt="" width="300" height="193" /></a>DesktopServer is designed with specifications that matches most modern hosting providers to make deploying your WordPress website less complicated. WordPress requires a minimum of PHP 5.2.4, but most hosts use PHP 5.3.  Be sure to set PhpStorm&#8217;s language level to 5.3 as its default is 5.4. Use Ctrl+Alt+S on Windows or Command+, on Macintosh to bring up the PhpStorm Settings panel and select &#8220;PHP&#8221; in the settings list. Use the drop down combo box for &#8220;PHP language level&#8221; to set the value to 5.3.</p>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Debugging WordPress in PhpStorm</h4>
<blockquote>
<p style="text-align: center;">PhpStorm&#8217;s web debugging is a bit awkward [for the first time]&#8230; Despite this clumsy process, the user interface for debugging is significantly faster than Netbeans and well worth the initial burden.</p>
</blockquote>
<div class="clear"></div>
<p>Starting PhpStorm&#8217;s web debugging is a bit awkward and somewhat cumbersome when you use it for the first time in a given project. It departs from traditional IDEs that feature start and stop buttons that automatically open your web browser to kick off a debug process. While PhpStorm has a start (green &#8216;play&#8217; icon) button for console and linear web applications, it is awkward when using XDebug and WordPress; especially when dealing with permalink structures. Instead, you can ignore those buttons and click the &#8220;Start Listen PHP Debug Connections&#8221; button on the toolbar (that looks like an old telephone handset) followed by opening your web browser and entering a special URL argument (which you can later bookmark). But before you can use debugging for the first time, you will need to let the file indexing process complete. Like Netbeans and other modern IDEs, PhpStorm pre-indexes your project files for faster editing and search functionality. You will also have to answer a security dialog with an &#8216;Accept&#8217; button to authorize the XDebug connection. Thankfully, initial indexing is a one time process required before the debug button is enabled on the toolbar. The &#8216;Accept&#8217; debug authorization dialog is also remembered for your convenience. When you first create your project from existing source files, PhpStorm will automatically start indexing all of your files.  If indexing doesn&#8217;t start automatically (and it failed for me on both Mac and Windows on more then one occasion), you&#8217;ll simply need to close PhpStorm and re-open your project. Despite this clumsy process, the user interface for debugging is significantly faster than Netbeans and well worth the minor, initial burden.</p>
<p style="text-align: center;"><a href="http://serverpress.com/wp-content/uploads/2012/07/8-Wait-for-indexing.jpg"><img class="aligncenter  wp-image-5214" title="8-Wait-for-indexing" src="http://serverpress.com/wp-content/uploads/2012/07/8-Wait-for-indexing.jpg" alt="" width="717" height="470" /></a></p>
<p>The &#8220;Start Listen PHP Debug Connections&#8221; button will have a little telephone headset icon that should turn from red to green when clicked and enabled. You can then open one of your source code files that you would like to begin debugging or editing. In our example below, I have opened the index.php file from WordPress&#8217; default twentyeleven theme and placed a breakpoint on the source code line &#8220;get_header();&#8221;. To kick off the debug process, simply open your favorite web browser and enter the URL of your development website followed by the debug parameter &#8220;XDEBUG_SESSION_START&#8221;. For instance, to start debugging our example website&#8217;s home page, type http://www.example.dev/?XDEBUG_SESSION_START on the URL address bar and press enter.</p>
<p><a href="http://serverpress.com/wp-content/uploads/2012/07/9-XDEBUG_SESSION_START.jpg"><img class="wp-image-5215 alignleft" title="Open your browser and append the XDEBUG_SESSION_START parameter" src="http://serverpress.com/wp-content/uploads/2012/07/9-XDEBUG_SESSION_START.jpg" alt="" width="398" height="251" /> </a><a href="http://serverpress.com/wp-content/uploads/2012/07/10-Accept-incoming.jpg"><img class="wp-image-5216 alignleft" title="Click the &quot;Accept&quot; button to start debugging" src="http://serverpress.com/wp-content/uploads/2012/07/10-Accept-incoming.jpg" alt="" width="398" height="252" /></a></p>
<div class="clear"></div>
<div class="clear">The PhpStorm debugger will color the current line of code that the instruction pointer is about to execute blue. In our example below, the blue line will be the first breakpoint that PhpStorm encounters (the breakpoint we set for the &#8220;get_header();&#8221; line of code in our twentyeleven/index.php file). You can use the step buttons to &#8220;walk&#8221; through code logic to help you understand how WordPress, plugins and theme files work. Use the &#8220;Watches&#8221; window to examine local and <a href="http://codex.wordpress.org/Global_Variables" target="_blank">global variables</a>. You can stop the debug process at anytime by clicking the red square icon in the side pane of the debugger tab.</div>
<div class="clear"></div>
<div class="clear" style="text-align: center;"><a href="http://serverpress.com/wp-content/uploads/2012/07/11-PhpStorm-breakpoint.jpg"><img class="aligncenter  wp-image-5217" title="Use step buttons to &quot;walk&quot; through code and find errors" src="http://serverpress.com/wp-content/uploads/2012/07/11-PhpStorm-breakpoint.jpg" alt="" width="717" height="459" /></a></div>
<div class="clear" style="text-align: center;"></div>
<div class="clear" style="text-align: left;">You can hover your mouse pointer over pieces of PHP code to reveal variable contents while the instruction pointer is stopped. PhpStorm will automatically provide floating popups that reveal variable values or a &#8216;+&#8217; symbol to examine more complex data structures. PhpStorm provides additional windows that appear below the main code editor to show context variable values and a &#8220;Frames&#8221; window (a breadcrumb history of files processed before the breakpoint was encountered).</div>
<div class="clear" style="text-align: left;"></div>
<div class="clear" style="text-align: center;"><a href="http://serverpress.com/wp-content/uploads/2012/07/12-PhpStorm-features.jpg"><img class="aligncenter  wp-image-5218" title="PhpStorm's variable hints are fast and convenient; just hover over a variable." src="http://serverpress.com/wp-content/uploads/2012/07/12-PhpStorm-features.jpg" alt="" width="717" height="472" /></a></div>
<div class="clear" style="text-align: center;"></div>
<div class="divider-fullwidth"></div>
<h4 style="text-align: left;">Last Notes</h4>
<p>Regardless of the initial less than intuitive web debugging process, PhpStorm appears to match NetBeans in several key debug features and goes beyond with a more responsive and snappy feel. Performance is definitely kicked up a notch and key features like floating variable hints &#8220;just work&#8221;. This useful and touted NetBeans feature has never worked right in Netbeans and is currently broken in version 7. But it works really well in PhpStorm. In addition, the variable watch window and inspectors appear to be more consistent while stepping through code and refreshes are considerably faster than Netbeans. PhpStorm appears to also match Netbeans on a feature by feature basis with almost identical popup context menus for code navigation abilities like &#8220;Find Declaration&#8221;,  &#8221;Find Usages&#8221;, and included built-in difference tools. In fact, checking out the overview of features in the my <a href="http://serverpress.com/news/using-netbeans-for-wordpress-debugging-development/">&#8220;Using Netbeans for WordPress&#8230;&#8221;</a> post easily matches PhpStorm in almost every aspect, but with the polish you&#8217;d expect from a paid commercial product. Give it try; it might just be the productivity boost you&#8217;ve been looking for in a dedicated PHP editor.</p>
]]></content:encoded>
			<wfw:commentRss>http://serverpress.com/news/using-phpstorm-for-wordpress-debugging-development/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Using Coda 2 for WordPress Design and Development</title>
		<link>http://serverpress.com/news/using-coda-2-for-wordpress-design-and-development/</link>
		<comments>http://serverpress.com/news/using-coda-2-for-wordpress-design-and-development/#comments</comments>
		<pubDate>Wed, 11 Jul 2012 04:26:24 +0000</pubDate>
		<dc:creator>Stephen Carroll</dc:creator>
				<category><![CDATA[How To Tutorials]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[AirPreview]]></category>
		<category><![CDATA[Coda 2]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[develop]]></category>
		<category><![CDATA[Diet Coda]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://serverpress.com/?p=4920</guid>
		<description><![CDATA[DesktopServer Premium edition version 3.4.0 now includes extended support for Panic&#8217;s latest Coda 2 IDE (integrated development environment). Now you can develop WordPress websites in Coda 2 with enhanced features such as WYSIWYG split view editing on template files (formerly only available in Adobe Dreamweaver). In addition, DesktopServer includes support for AirPreview in Panic&#8217;s Diet [...]]]></description>
			<content:encoded><![CDATA[<p>DesktopServer Premium edition version 3.4.0 now includes extended support for Panic&#8217;s latest Coda 2 IDE (integrated development environment). Now you can develop WordPress websites in Coda 2 with enhanced features such as WYSIWYG split view editing on template files (formerly only available in Adobe Dreamweaver). In addition, DesktopServer includes support for AirPreview in Panic&#8217;s Diet Coda for Apple&#8217;s iPad. AirPreview will allow you to work in Coda 2 while seeing a site preview on your iPad device. DesktopServer unleashes AirPreview functionality to work with your dynamic, PHP driven WordPress website. DesktopServer is the only web server that enables this level of functionality and integration with Coda 2 and WordPress to help you design, develop, and deploy faster then ever. </p>
<p>Watch the video below to follow along and learn how to get started with WordPress, Coda 2, and Diet Coda using DesktopServer.</p>
<p><span style="text-align:center; display: block;"><a href="http://serverpress.com/news/using-coda-2-for-wordpress-design-and-development/"><img src="http://img.youtube.com/vi/Pw9-F8etBPY/2.jpg" alt="" /></a></span></p>
]]></content:encoded>
			<wfw:commentRss>http://serverpress.com/news/using-coda-2-for-wordpress-design-and-development/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Using NetBeans for WordPress Debugging &amp; Development</title>
		<link>http://serverpress.com/news/using-netbeans-for-wordpress-debugging-development/</link>
		<comments>http://serverpress.com/news/using-netbeans-for-wordpress-debugging-development/#comments</comments>
		<pubDate>Wed, 11 Apr 2012 20:45:14 +0000</pubDate>
		<dc:creator>Stephen Carroll</dc:creator>
				<category><![CDATA[How To Tutorials]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[debugging]]></category>
		<category><![CDATA[develop]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[netbeans]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://serverpress.com/?p=2687</guid>
		<description><![CDATA[NetBeans is an excellent, free IDE (Integrated Development Environment) that is well suited for WordPress website development. Coupled with the free or premium version of DesktopServer and you will have a modern, professional IDE setup. Even if you are already using another editor or development environment like Adobe Dreamweaver (great for design, not so great [...]]]></description>
			<content:encoded><![CDATA[<p>NetBeans is an excellent, free IDE (Integrated Development Environment) that is well suited for WordPress website development. Coupled with the free or premium version of DesktopServer and you will have a modern, professional IDE setup. Even if you are already using another editor or development environment like Adobe Dreamweaver (great for design, not so great for debugging), you may still want to give NetBeans a try or use it as your powerful secondary editor. In this post I&#8217;ll show you how easy it is to get started and I&#8217;ll cover the basics of using NetBeans for WordPress development.</p>
<h4>NetBeans IDE</h4>
<p>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 &#8216;template tags&#8217; 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 &#8216;folded&#8217; excerpts. Given the right key combinations, <em>NetBeans will even write code for you</em>.<span id="more-2687"></span></p>
<h4>Getting Started</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2012/03/download-netbeans.jpg"><img class="alignleft size-medium wp-image-3937" title="Download the PHP version for your platform." src="http://serverpress.com/wp-content/uploads/2012/03/download-netbeans-300x255.jpg" alt="" width="300" height="255" /></a>To get started, you will want to visit the NetBeans download page at (<a href="http://NetBeans.org/downloads/index.html" target="_blank">http://netbeans.org/downloads/index.html</a>) 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.</p>
<div class="clear"></div>
<div class="clear"><a href="http://serverpress.com/wp-content/uploads/2012/03/enable-debug.jpg"><img class="alignright size-medium wp-image-4006" title="Enable enhanced features." src="http://serverpress.com/wp-content/uploads/2012/03/enable-debug-300x232.jpg" alt="" width="300" height="232" /></a>First, make sure you have checked the &#8216;Enable debug services&#8217; check box in DesktopServer. You can find this setting in DesktopServer&#8217;s first main menu option &#8216;Stop or restart&#8230;&#8217;. Be sure to select the &#8216;Restart&#8217; option followed by clicking the &#8216;Next&#8217; 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.</div>
<div class="clear"></div>
<div class="clear"><a href="http://serverpress.com/wp-content/uploads/2012/03/netbeans-options.jpg"><img class="alignleft size-medium wp-image-4010" title="Netbean options, PHP, Debugging." src="http://serverpress.com/wp-content/uploads/2012/03/netbeans-options-300x253.jpg" alt="" width="300" height="253" /></a>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 &#8216;Stop at First Line&#8217; check box followed by check marking the &#8216;Watches and Balloon Evaluation&#8217;. 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.</div>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Import Your Project</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2012/03/new-project.jpg"><img class="alignleft size-medium wp-image-4015" title="Select the pull down menu File, New Project." src="http://serverpress.com/wp-content/uploads/2012/03/new-project-300x253.jpg" alt="" width="300" height="253" /></a>If you haven&#8217;t already created a project, take a moment to try the simple www.example.dev website as outlined in <a href="http://serverpress.com/news/getting-started-with-desktopserver/" target="_blank">&#8220;Getting Started with DesktopServer&#8221;</a>, steps 1 to 10. Importing your existing project into NetBeans is easy. Use NetBeans&#8217; File ? New Project pull down menu to open the New Project dialog. Select the option &#8216;PHP Application with Existing Sources&#8217;, then click the &#8216;Next&#8217; button to continue.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/03/select-source-folder.jpg"><img class="alignleft size-medium wp-image-4017" title="Select the source folder containing your website." src="http://serverpress.com/wp-content/uploads/2012/03/select-source-folder-300x236.jpg" alt="" width="300" height="236" /></a>NetBeans will prompt you for the source folder of your existing WordPress website. Navigate to the root folder by clicking the &#8216;Browse&#8230;&#8217; 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 &#8216;Open&#8217; 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 &#8216;Next&#8217; button to continue.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/03/remove-localhost.jpg"><img class="alignleft size-medium wp-image-4022" title="Remove the 'localhost' in http://localhost/www.example.dev/." src="http://serverpress.com/wp-content/uploads/2012/03/remove-localhost-300x263.jpg" alt="" width="300" height="263" /></a>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 &#8216;localhost&#8217; in the http://localhost project URL. This will allow you to properly launch, view, and debug your project from NetBeans&#8217; toolbar. In our example, the project URL should simply read http://www.example.dev. Lastly, click the &#8216;Finish&#8217; 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).</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/03/set-main-project.jpg"><img class="alignleft size-medium wp-image-4024" title="Right click your project domain name and Set as Main Project." src="http://serverpress.com/wp-content/uploads/2012/03/set-main-project-300x253.jpg" alt="" width="300" height="253" /></a>Set the main project you are working on by right clicking your project&#8217;s domain name and selecting &#8216;Set as Main Project&#8217; from the pop up context menu. Your selected project will appear in bold. You will want to use the &#8216;Set as Main Project&#8217; option to take advantage of NetBeans&#8217; 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.</p>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Editing Features</h4>
<p>Get ready to take advantage of some fast, professional development features! NetBeans is a full featured yet free IDE (Integrated Development Environment). But don&#8217;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 &#8216;Projects&#8217; 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&#8217;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&#8217;ve opened our index.php file from WordPress&#8217; 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.</p>
<p style="text-align: center;"><a href="http://serverpress.com/wp-content/uploads/2012/04/code-folding.jpg"><img class="aligncenter  wp-image-4062" title="Use the Navigator panel and Code Folding to traverse template files." src="http://serverpress.com/wp-content/uploads/2012/04/code-folding-1024x598.jpg" alt="" width="737" height="430" /></a></p>
<p>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 &#8220;code folding&#8221;. 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&#8217;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.</p>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Search Everything</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2012/04/search-in-files.jpg"><img class="alignleft size-medium wp-image-4069" title="Search within Files using the Project panel." src="http://serverpress.com/wp-content/uploads/2012/04/search-in-files-300x260.jpg" alt="" width="300" height="260" /></a>Search is essential to a powerful editor and NetBeans provides <strong>four</strong> 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 &#8216;Find&#8217; 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.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2012/04/function-find.jpg"><img class="alignleft size-medium wp-image-4072" title="Right-click a function to bring up additional features." src="http://serverpress.com/wp-content/uploads/2012/04/function-find-300x257.jpg" alt="" width="300" height="257" /></a>NetBeans offers two more search / navigation features specifically for PHP developers. The &#8220;Go to Declaration&#8221; and &#8220;Find Usages&#8221; 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&#8217;ve opened up the index.php file in WordPress&#8217; default Twenty Eleven theme and right clicked the function &#8220;twentyeleven_content_nav&#8221;. 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&#8217; 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&#8217;s files fast and easy.</p>
<div class="clear"></div>
<div class="divider-fullwidth"></div>
<h4>Debugging with NetBeans</h4>
<p>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&#8217; 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&#8217;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&#8217;t enough room in this article to cover the nuances of debugging -much less the fine art of programming patterns for easier debugging, I&#8217;ll at least define the debugging process while focusing on the goal of simply introducing this useful DesktopServer + NetBeans feature.</p>
<h5>Debugging Briefly Defined</h5>
<p>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 &#8216;played back&#8217; 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 (&#8216;if&#8217; and &#8216;switch&#8217; 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 (&#8216;notes&#8217;), 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&#8217;ve been and a powerful watch tool to help us if we are out-of-tune or off-key, so to speak.</p>
<h5>Starting the Debugger</h5>
<p><a href="http://serverpress.com/wp-content/uploads/2012/04/inspect-variables.jpg"><img class="alignleft size-medium wp-image-4077" title="Use Debug Main Project button on the toolbar to start debugging." src="http://serverpress.com/wp-content/uploads/2012/04/inspect-variables-300x221.jpg" alt="" width="300" height="221" /></a>So let&#8217;s get started! First, you will want to begin by creating a &#8216;breakpoint&#8217;. 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&#8217; 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 &#8216;Debug Main Project&#8217; button on the toolbar. This button appears to the right of the green arrow icon. The green arrow button is also known as the &#8216;Run Main Project&#8217; button, which only starts your default web browser (if it isn&#8217;t opened already) and visits your site&#8217;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: &#8216;Debug Main Project&#8217; because it changes NetBeans from an editor to a debugger.</p>
<p>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&#8217;ve paused the record). Switch your focus back to NetBeans and you will notice that the editor is in debug mode. The additional &#8216;step&#8217; icon buttons should appear along with a green line where the red line for our breakpoint formerly resided. The green line represents the &#8216;instruction pointer&#8217; (or needle in our record player analogy) showing us the next line of code to be run. You&#8217;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&#8217; main editor window. Follow through with step 4 (as shown in the image above) and right-click within the Variables panel and select &#8216;New Watch&#8230;&#8217; 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 &#8216;Delete&#8217; from the pop up context menu.</p>
<div><a href="http://serverpress.com/wp-content/uploads/2012/04/peek-variables.jpg"><img class="alignleft size-medium wp-image-4075" title="Use the Variables panel to peek at WordPress internals." src="http://serverpress.com/wp-content/uploads/2012/04/peek-variables-300x182.jpg" alt="" width="300" height="182" /></a>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&#8217; debug mode. If you click &#8216;reload&#8217; 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&#8217; 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&#8217;ve covered the first four buttons on the debugger toolbar:</div>
<div>
<ol>
<li>Run Main Project &#8211; simply open your default web browser and visit your WordPress&#8217; home page. For the most part, we can ignore this button.</li>
<li>Debug Main Project &#8211; Put NetBeans into debug mode while also opening up your web browser to visit your WordPress&#8217; home page, but stop on any pre-defined breakpoints. This is our most important button.</li>
<li>Finish Debugger (a.k.a. Stop) &#8211; Stops the debugging process and puts NetBeans back into editor mode, allowing you to safely make edits to your documents.</li>
<li>Continue &#8211; Continue debugging and stopping on the next pre-defined breakpoints (if any).</li>
</ol>
</div>
<div class="clear"></div>
<h5>Going Step By Step</h5>
<p><a href="http://serverpress.com/wp-content/uploads/2012/04/debug-toolbar.jpg"><img class="size-medium wp-image-4099 alignleft" title="Use the debugging toolbar to navigate code step by step." src="http://serverpress.com/wp-content/uploads/2012/04/debug-toolbar-300x98.jpg" alt="" width="300" height="98" /></a>The additional step buttons on the tool bar are equally important to debugging and each restarts then pauses the playback of our &#8216;record player&#8217; 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&#8217;t have to go through every line of code and open all their associated files, which can quickly become cumbersome.</p>
<p>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 &#8216;Step Into&#8217; every function definition&#8217;s lines of code. If a function is defined in another file and is not a native PHP function (PHP&#8217;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.</p>
<p><a href="http://serverpress.com/wp-content/uploads/2012/04/call-stack.jpg"><img class="alignleft size-medium wp-image-4137" title="Use the Call Stack to trace the source code route up to your breakpoint." src="http://serverpress.com/wp-content/uploads/2012/04/call-stack-271x300.jpg" alt="" width="271" height="300" /></a>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.</p>
<div class="clear"></div>
<p>The second to last button in the debug toolbar group is the Step Out button. It provides a convenient way to &#8216;Step Out&#8217; 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&#8217;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 &#8216;repeat barlines&#8217; and &#8216;volta brackets&#8217;. Don&#8217;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 (&#8216;if&#8217;, &#8216;switch&#8217;, &#8216;while&#8217;, &#8216;for&#8230;&#8217;, 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. <a title="The Loop definition" href="http://codex.wordpress.org/The_Loop" target="_blank">The Loop</a> 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.</p>
<h5>Debugging Tips</h5>
<p>Here are some tips that can help make working with the debugger easier.</p>
<ul>
<li>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: &lt;?php $x = 1; ?&gt; <!--?php $x = 1; ?-->followed by clicking the line number to set the breakpoint.</li>
<li>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.</li>
<li>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.</li>
<li>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:<br />
Window ? Debugging ? Breakpoints.</li>
<li>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 &#8216;New Watch&#8217; to watch the variable contents in the Variables window panel.</li>
<li>WordPress has dozens of <a href="http://codex.wordpress.org/Global_Variables" target="_blank">global variables (see http://codex.wordpress.org/Global_Variables)</a> that you can use and examine. In some cases, you may need to prepend the &#8216;global&#8217; statement to gain access. For instance, choose a location for your breakpoint and prepend the PHP block <!--?php global $wp; ?--> <!--?php global $wp; ?-->before the breakpoint and you will be able to add the $wp variable to your Variables panel to view its contents.</li>
<li>Some WordPress <a href="http://codex.wordpress.org/Template_Tags/" target="_blank">template tags</a> and <a href="http://codex.wordpress.org/Function_Reference" target="_blank">functions</a> 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 <a href="http://codex.wordpress.org/Function_Reference/wp_list_categories" target="_blank">wp_list_categories</a> &#8216;echo&#8217; 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 =<a href="http://codex.wordpress.org/Function_Reference/get_bloginfo" target="_blank"> get_bloginfo(&#8216;name&#8217;);</a> (versus using the echoing version of the same function <a href="http://codex.wordpress.org/Template_Tags/bloginfo" target="_blank">bloginfo(&#8216;name&#8217;);</a> ) to find out the value.</li>
<li><a href="http://codex.wordpress.org/Template_Tags/bloginfo" target="_blank">F</a>or additional information specific to NetBeans debugging with PHP, see <a href="http://netbeans.org/kb/docs/php/debugging.html" target="_blank">Debugging PHP Source Code in the NetBeans IDE at http://netbeans.org/kb/docs/php/debugging.html.</a></li>
</ul>
<div class="clear">If you can master the art of basic debugging, you do not need to know everything about the a program to change, hack, or morph code to your needs. Debugging reveals to you the working internals of everything, much like a microscope can show structors of a larger component. You&#8217;ll be able to decipher the characteristics and behavior of an application based on its fundamental pieces and know which functions are being used. Most importantly, the debugger can reveal why something is happening or NOT happening such as when a condition is not being met. You won&#8217;t need to know everything about a program&#8217;s design or even programming design patterns and methodologies to start working with the debugger. Debugging takes a lower level approach and will allow you to see under WordPress&#8217; hood and watch how the program makes decisions and outputs various portions of your template files or, just as importantly, why it does not.</div>
<div class="clear"></div>
<h4>Conclusion</h4>
<p>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 &amp; 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 <a href="http://www.nutt.net/2012/03/30/adding-wordpress-templates-to-netbeans/" target="_blank">add WordPress specific templates to NetBeans</a> or leverage NetBeans&#8217; plugin repository to make <a href="http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=21086" target="_blank">PHP documentation one click away</a>. 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!</p>
]]></content:encoded>
			<wfw:commentRss>http://serverpress.com/news/using-netbeans-for-wordpress-debugging-development/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Using Dreamweaver for WordPress Design and Development</title>
		<link>http://serverpress.com/news/using-dreamweaver-for-wordpress-design-and-development/</link>
		<comments>http://serverpress.com/news/using-dreamweaver-for-wordpress-design-and-development/#comments</comments>
		<pubDate>Sat, 31 Dec 2011 09:20:41 +0000</pubDate>
		<dc:creator>Stephen Carroll</dc:creator>
				<category><![CDATA[How To Tutorials]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[develop]]></category>
		<category><![CDATA[dreamweaver]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://serverpress.com/?p=2537</guid>
		<description><![CDATA[DesktopServer Premium edition version 3.3 now includes extended support for Adobe Dreamweaver&#8217;s Live View. No other web server provides extended Live View support directly for WordPress template files in Dreamweaver. At best, you can only use WordPress with Dreamweaver&#8217;s Live View on just the index.php file in your WordPress&#8217; site root folder. But DesktopServer takes [...]]]></description>
			<content:encoded><![CDATA[<p>DesktopServer Premium edition version 3.3 now includes extended support for <a href="http://www.tkqlhce.com/click-5593186-10469538" target="_blank">Adobe Dreamweaver&#8217;s</a><img src="http://www.tqlkg.com/image-5593186-10469538" alt="" width="1" height="1" border="0" /> Live View. No other web server provides extended Live View support directly for WordPress <a title="Template Hierarchy" href="http://codex.wordpress.org/Template_Hierarchy" target="_blank">template files</a> in Dreamweaver. At best, you can only use WordPress with Dreamweaver&#8217;s Live View on just the index.php file in your WordPress&#8217; site root folder. But DesktopServer takes Live View further by sensing Dreamweaver&#8217;s built in browser. DesktopServer directly renders WordPress <a title="Template Hierarchy" href="http://codex.wordpress.org/Template_Hierarchy" target="_blank">template files</a> (and their include file fragments) for more visual feedback and to assist in faster theme design &amp; development. Originally introduced in Dreamweaver CS4, Live View (formerly Live Data in CS3) provides a more modern embedded web browser. Dreamweaver optimizes web development by allowing designers to work on their website files in Code View while seeing a real Live View of their site in Dreamweaver&#8217;s Design View window. For an abridged overview, check out the video below.<span id="more-2537"></span></p>
<div style="float: right; padding: 0px 5px 32px 15px;"><!-- [ savvideo src="dw-support" height="480" width="640"] --></p>
<p><span style="text-align:center; display: block;"><a href="http://serverpress.com/news/using-dreamweaver-for-wordpress-design-and-development/"><img src="http://img.youtube.com/vi/2bCTbjoBWa8/2.jpg" alt="" /></a></span></p>
<p>The Live View feature is a much-needed update to Dreamweaver&#8217;s original Live Data mode in Dreamweaver CS3. Although DesktopServer&#8217;s extended features will also work with Dreamweaver CS3&#8242;s older, dated embedded browser (aka Live Data mode), WordPress designers will benefit the most from the latest version of <a href="http://www.tkqlhce.com/click-5593186-10469538" target="_blank">Dreamweaver CS5.5</a><img src="http://www.tqlkg.com/image-5593186-10469538" alt="" width="1" height="1" border="0" /> which includes a cutting edge WebKit based browser rendering engine as well as support for multi-monitor workspaces. In this guide, I&#8217;ll show you how to streamline your design environment for working with Dreamweaver and WordPress.</p>
<div class="divider-content"></div>
<h4>Enable Dreamweaver Support</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/dw-checkbox.jpg"><img class="alignleft size-medium wp-image-2543" title="Enable Dreamweaver Support" src="http://serverpress.com/wp-content/uploads/2011/12/dw-checkbox-300x229.jpg" alt="" width="300" height="229" /></a>When you start DesktopServer Premium version 3.3 for the first time or after selecting the first option to &#8220;Stop or restart web and database services&#8221;, you will see a new checkbox that is titled &#8220;Enable Dreamweaver support&#8221;. 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&#8217;s folder named as &#8220;dreamweaver.ste&#8221;. (i.e. ../Websites/www.example.dev/dreamweaver.ste). When exporting your website, DesktopServer will omit this file so you won&#8217;t have to worry about security risks (as the file might pose a security risk by revealing your server&#8217;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&#8217;t needed after import. <span style="display: none;">If you already have your website defined, you can manually create a site definition for your existing website by seeing my post titled, <a href="http://serverpress.com/how-to/how-to-add-a-dreamweaver-site-definition-for-a-website" target="_blank">How to Add a Dreamweaver Site Definition for a Website</a>.</span></p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/dw-managesites.jpg"><img class="size-medium wp-image-2546 alignright" title="Add your website to the Manage Sites window" src="http://serverpress.com/wp-content/uploads/2011/12/dw-managesites-300x209.jpg" alt="" width="300" height="209" /></a> If you haven&#8217;t created a website yet, simply follow the directions in the post <a title="Getting Started with DesktopServer" href="http://serverpress.com/news/getting-started-with-desktopserver/" target="_blank">Getting Started with DesktopServer</a>. 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&#8217;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&#8217;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.</p>
<div class="divider-content"></div>
<h4>Enable Code Hints</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/code-hints.gif"><img class="alignleft size-medium wp-image-2597" title="Enable Code Hints in Dreamweaver CS5" src="http://serverpress.com/wp-content/uploads/2011/12/code-hints-300x204.gif" alt="" width="300" height="204" /></a><a href="http://www.tkqlhce.com/click-5593186-10469538" target="_blank">Adobe Dreamweaver CS5</a> 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 &#8220;Structure&#8221; 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 <a href="http://codex.wordpress.org/Template_Tags" target="_blank">WordPress&#8217; Template Tag API and proper syntax</a>. 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 <code>&lt;?php get_ ?&gt; </code>press the Ctrl+space bar key combo and a popup list will appear containing a matching set of&nbsp; WordPress template tags that begin with &#8220;get_&#8221;, 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.</p>
<div class="divider-content"></div>
<h4>Using Dreamweaver and WordPress</h4>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/dw-interface.jpg"><img class="alignleft size-medium wp-image-2547" title="Use Split view to accelerate design and development" src="http://serverpress.com/wp-content/uploads/2011/12/dw-interface-300x199.jpg" alt="" width="300" height="199" /></a>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&#8242;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&#8217;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.</p>
<blockquote style="font-size: larger;"><p>DesktopServer&#8217;s real power is the convenience feature of viewing your theme files directly [and] &#8230;using Dreamweaver&#8217;s Inspect toolbar button to analyze elements and their corresponding code.</p></blockquote>
<p>DesktopServer&#8217;s real power is the convenience feature of viewing your theme files directly. For instance, you can open your theme&#8217;s header file directly by navigating to your active theme&#8217;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&#8217;s index.php file and see how content is rendered. Another convenience feature is the ability to click various elements in Split view&#8217;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&#8217;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&#8217;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&#8217;s style.css file.</p>
<div class="clear"></div>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/render-content.jpg"><img class="size-medium wp-image-2552 alignright" title="For more percise rendering, open active theme template files." src="http://serverpress.com/wp-content/uploads/2011/12/render-content-300x200.jpg" alt="" width="300" height="200" /></a>The actual content that is displayed in Dreamweaver&#8217;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&#8217; admin menu under Settings ? Reading. Select a different front page and that content will be displayed in Dreamweaver&#8217;s Live View rendering. The currently selected content can also influence your CSS rules as WordPress&#8217; 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 <a href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class </a>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&#8217;s appearance. Thankfully, you can verify what class and id tags are present along with all output by quickly doing a &#8216;view source&#8217; using Dreamweaver&#8217;s Live Code button.</p>
<p><a href="http://serverpress.com/wp-content/uploads/2011/12/dyn-related.gif"><img class="alignleft size-full wp-image-2764" title="Use default permalinks during theme design." src="http://serverpress.com/wp-content/uploads/2011/12/dyn-related.gif" alt="" width="249" height="131" /></a>An alert message maybe displayed about dynamically related files not resolving. This is because Dreamweaver doesn&#8217;t understand WordPress&#8217; ability to mask URLs with permalinks. You can safely dismiss this message or switch permalinks in WordPress&#8217; admin menu via Settings ? Permalinks and selecting the default option.</p>
<div class="clear"></div>
<p>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&nbsp;faster now that you have your WordPress website loaded locally inside <a href="http://www.tkqlhce.com/click-5593186-10469538" target="_blank">Dreamweaver</a>. 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&#8217;s integrated development environment. Now you can customize the look and feel of your WordPress powered websites and view the results even faster.</p>
]]></content:encoded>
			<wfw:commentRss>http://serverpress.com/news/using-dreamweaver-for-wordpress-design-and-development/feed/</wfw:commentRss>
		<slash:comments>44</slash:comments>
		</item>
	</channel>
</rss>
