WordPress development with NetBeans IDE

PHP is most popular programing language for web development, and WordPress one of the most important applications for PHP. Comfortable and powerful development environment is essential, and now, no other solution comes close to the power of NetBeans.

Latest NetBeans IDE from January 2012

Intro to NetBeans IDE

Years ago, NetBeans started as Java development tool, but it grow much over the years. Now, NetBeans IDE support: Java, C/C++, Groovy and PHP with many more available through plugins. Depending on your development needs, you can download partial installation, and one of them is NetBeans IDE for PHP. Major elements of the IDE for PHP are: powerful code editor, projects, frameworks support, debugging, remote and local development, unit testing, phpDocumentator support, namespace support, mySQL integration, code coverage… Beside that, NetBeans IDE has complete support for: HTML, CSS, CSS3, JavaScript, AJAX and integration with popular toolkits (jQuery, Prototype…).

So, for WordPress development, you have everything you need in one powerful IDE. It is important to know that NetBeans IDE works on Windows, Linux and MacOS, and it requires Java JRE installed. Unlike the Eclipse that is also Java based, NetBeans is very fast and not resource hungry as you might expect from Java software, especially under Windows.

Setting up WordPress project

For local development you need, and most likely already have, local server setup where you keep your development websites. To use NetBeans you can use any such local server setup: DesktopServer, XAMPP… To make the best of the developing for WordPress, best thing is to add each your website as a separate project. That will include all WordPress files including wp-content with plugins and themes folder, so you can work on anything you need. Best thing about adding whole project like this is that NetBeans will scan the project and index WordPress function, classes and other elements. This scanning can take a couple of minutes for each project, and each time you start NetBeans, it will take a bit more time to check all projects for changes.

To add new project, open File menu, and click on New Project. Dialog likes this:

New Project

As you can see, you can start empty application, application from sources or remote server. Select one from existing sources and click next. New dialog appears. And you need to select where is your project. Browse for it, and select root folder where the WordPress installation is. It should look like the image:

Select source folder

Click open, and now you need to select PHP version and to give project a name. It is recommended to use PHP 5.1/5.2 for this.

Final project creation step

Projects List

Click Finish, and you are done. NetBeans will need one more minute to scan source for the project, and you will be ready to work. Your new project will be added to Projects list on the left (you can rearrange it). It is recommended to have each website as separate project.

Favorites Panel

If you work on plugins or themes in one WordPress installation, you can make it easier, and add each plugin or theme you need into Favorites panel. This will help you find your work easier without going through whole projects list. To do this, simply right-click on the folder in the projects panel, and select from Tools menu option Add to Favorites. Favorites look with the Navigator is on the image on the right.

Navigator shows all identifiable elements in the now open file for easier navigation through the code.

Powerful editor

Once you have set up the projects you want to use, you can first of all, use autocomplete. If you are in PHP context editing, you will get info on all found functions (both default PHP and found in the code). If you are in JavaScript or CSS editing context, it will work the same way. Image here shows what happens if you start typing ‘wp_admin_c’. You will get list of possible functions and all function versions in regard to arguments, and above you will see documentation for selected function.

Autocomplete and suggestions

If you need to navigate through code by following functions, you can use context menu and option Navigate, or you can use hover over the function, class or variable name with CTRL key pressed, and you will get item documentation. If you click, you will be taken to declaration. Code folding works great with any type of code and will help you working with large files. Also, there are plenty of options available through top and context menus.

Code navigation and quick help

NetBeans support phpDocumentator specification, and to add it, position cursor in the line before function or class declaration starts, start the line with /** hit enter, and you will get all comment containing parameters, globals and return found in the function or class.

If you need to work with CSS, JavaScript and HTML in your files, you can do everything (or almost) with NetBeans. CSS editor is very powerful, and I have stopped using any other external editor for that, and from 7.1 version, it supports CSS3.

File Version History

Support for SVN, GIT, Mercurial

If you are using some versioning  system (Subversion or Git for instance), NetBeans will allow you to work with repositories directly and to show you changes to files, to make updates or send changes to server.

Color coded changes in editor

All changes made are color coded in the editor, but you also have History look that will show how the code looked before and after modification with access to all historical changes data for both local and versioning system changes.

Editor uses colors to mark deleted (red), new (green) and edited (blue) lines of code. Navigation can be done directly by clicking on the position on the right side of the editor. There are many useful things to help with navigation including markers, all found on the editor toolbar.

Debug whole WordPress website

Yes, you can do that. I will not go into details on how to set up your environment for debugging, there is a in detail article on NetBeans website about this: How to configure XDebug. Anything you expect from debugger you can find here. You can start debug of the whole project, and that is what you must do when developing for WordPress (regardless if you make theme or plugin), because WordPress needs to load the way it usually does, so always use Debug Project option for this. In debug mode, you will get additional panels tracking the process and you can use break points also (simply click on the line number to add red debug point).

What’s next?

This is only introduction in using NetBeans IDE for WordPress development, just to get you started. It can take you few days to take everything in and to discover what can be done with this great program, but it will be worth it. You can easily replace all your other editors with this one and make your development process more streamlined and confined within one program.

Download NetBeans IDE:
http://netbeans.org/downloads/