My Genesis Site: My Preferred Text Editor/IDE

Over the past 3 years I have tried a variety of editors and IDEs (Integrated Development Environment), including, but not limited to:

*Please note that I have a Windows machine, so Mac IDes (e.g., Coda, etc.) were not part of my evaluation though I have used Coda Lite on my iPad.

I have enjoyed each one for its particular nuances, and each IDE has its strengths and weaknesses. Each one comes with its preset shortcuts and some have the ability to change their shortcuts on a per user basis. Personally, I believe anyone can compare these editors and as many editors there are there could be winners, and there is always that one person who will go and create another editor because the “others just won’t do what I need.”

If you can afford it, I encourage you to do what I did and spend time whether it’s a week, two weeks or an entire month (probably best) to determine which editor is the best fit for you. If you currently use an editor and you have gotten along fairly well, then there may not be a need to switch (unless it is vanilla Notepad).

However, if any of you do any PHP development, almost hands-down across personal, professional, and enterprises, PHPStorm is the recognized international leader for development and integrations. It really does make life simpler.

For me, I finally tried PHPStorm and when I did, I was blown away. After doing Grunt, Gulp, and Phing to automate my workflow struggling with it from a “purist” point-of-view, when I did these things on PHPStorm, I was up and running in no time at all asking myself, “Why didn’t I try this sooner!?” So let me outline the benefits of PHPStorm at a high level and highlight a couple of those benefits in more detail. Please note this will only scratch the surface of the benefits of using PHPStorm.

Benefits of PHPStorm

As a WordPress developer, I only care about the benefits of an IDE as it pertains to helping me develop inside of WordPress. So what does PHPStorm offer? It offers a great deal actually.

  1. PHPDoc support
  2. Coding style support, built-in PSR1/PSR2, Symfony2, Zend, and Drupal compliant code formatting
  3. Code Analysis: Coverage, Mess Detection, Copy-Paste, Reformatting according to WordPress Coding Standards
  4. PHP refactorings and code (re)arranger
  5. Visual debugger for PHP applications with debugger configuration validation, PHPUnit with code coverage, and Profiler integration
  6. Cutting-edge web development technologies are supported including HTML5, CSS, Sass, SCSS, Less, CoffeeScript, TypeScript, Dart, ECMAScript Harmony, Jade templates, Zen Coding, Emmet, AngularJS, and of course JavaScript.
  7. Includes all the functionality of WebStorm (HTML/CSS Editor, JavaScript Editor) and adds full-fledged support for PHP and Databases/SQL.
  8. Supports PHP 5.3, 5.4, 5.5, 5.6 & 7.0 (partial), including and all the syntax improvements
  9. Vagrant integration, Composer support, Built-in REST Client & SSH Console with remote tools, Command Line Tools, Google App Engine for PHP support, Remote PHP interpreters, Behat
  10. Version Control Systems integration with unified UI
  11. Integration with issue trackers

That’s great, so what does all that mean?

PHPDoc Support

So if I have a function:

<?php
/**
* Determines whether we are in debug mode or not based on WP_DEBUG & SCRIPT_DEBUG
*
* @return bool Whether we are in debug mode.
*/
function wps_is_debug() {
return ( ( defined( 'WP_DEBUG' ) && WP_DEBUG ) || ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) );
}
view raw functions1.php hosted with ❤ by GitHub

As soon as I type /** and press ENTER, PHPStorm gives me:

<?php
/**
* @return bool
*/
view raw header1.php hosted with ❤ by GitHub

If I were to type /* and press ENTER, PHPStorm gives me:

<?php
/*
*
*/
view raw header2.php hosted with ❤ by GitHub

Now all I need to do is to enter the description and more details.

Besides the return, PHPStorm auto-populates the parameters. So if I have a function:

<?php
function wps_get_plugin_info( $plugin ) {
static $plugins = array();
if ( isset( $plugins[ $plugin ] ) ) {
return $plugins[ $plugin ];
}
if ( !function_exists( 'plugins_api' ) ) {
require_once( ABSPATH . '/wp-admin/includes/plugin-install.php' );
}
$info = plugins_api( 'plugin_information', array( 'slug' => $plugin ) );
$plugins[ $plugin ] = $info;
return $info;
}
view raw functions2.php hosted with ❤ by GitHub

As soon as I type /** and press ENTER, PHPStorm gives me:

<?php
/**
* @param $plugin
*
* @return object
*/
view raw header3.php hosted with ❤ by GitHub

WordPress Coding Standards

Reformatting

Let’s say you inherited someone’s functions file that had something like this:

<?php
function wps_get_plugin_info($plugin) {
static $plugins=array();
if ($plugin!='myplugin')
return false;
if (isset($plugins[$plugin]))
return $plugins[$plugin];
if ( !function_exists( 'plugins_api' ) )
require_once(ABSPATH.'/wp-admin/includes/plugin-install.php');
$info=plugins_api('plugin_information',array('slug'=>$plugin));
$plugins[$plugin]=$info;
return $info;
}
view raw functions3.php hosted with ❤ by GitHub

In PHPStorm, if you go to Code > Format Code, it will reformat the code to this:

<?php
function wps_get_plugin_info( $plugin ) {
static $plugins = array();
if ( $plugin != 'myplugin' ) {
return false;
}
if ( isset( $plugins[ $plugin ] ) ) {
return $plugins[ $plugin ];
}
if ( ! function_exists( 'plugins_api' ) ) {
require_once( ABSPATH . '/wp-admin/includes/plugin-install.php' );
}
$info = plugins_api( 'plugin_information', array( 'slug' => $plugin ) );
$plugins[ $plugin ] = $info;
return $info;
}

Notice that PHPStorm automatically added {braces} to all if-statements. It aligned all the equal signs (=). And it added all the necessary whitespace whether that’s 2 spaces per tab, 4 spaces per tab, or just tabs.

Deprecated Functions

PHPStorm Deprecated WordPress Function
PHPStorm is intelligent enough when you are editing the project (someone else’s project right?), functions that have been deprecated will have a strike-through the function name.

Git Integration

I simply love the Git integration of PHPStorm. After the setup, the Git integration is fairly seemless. Whenever I create a new file, it asks me whether I want to add it to the project’s version control. I can use shortcuts like Ctrl+K to commit and Ctrl+Shift+K to push. Whenever I commit, PHPStorm can do code analysis requesting that I fix issues before I commit the changes. All these small things add up to a lot of time over the period of a week.
PHPStorm Git Integration

Deployment Options

Besides integration into Git and implicit any Git Deployments, PHPStorm has a built-in SSH/sFTP engine to deploy code to any server. As soon as the file changes and is saved, it can automatically deploy to whatever your preferred server is. And you can setup multiple deployments.

Conclusion

Do you use PHPStorm? What did you like and not like? What is your most favorite feature of PHPStorm? If you don’t use PHPStorm, why not?

How I Created My Genesis Site

Today I want to introduce a series where I am going to walk through how I created my site. Over this series, I am going to walk through my setup, my development processes, my theme code modifications and enhancements, and my plugins I created or used to make my Genesis website.

Setup & Technologies Utilized

In the development of my site, I used the following technologies and processes:

  1. Preferred IDE: PHPStorm
  2. Version Control: Git (Git for Windows)
  3. DevOps/Automation: Node, Bower & Grunt (though I could have easily used Gulp)
  4. DevOps/Automation: SASS (CSS pre-processing)
  5. DevOps/Automation: MySQL Workbench & DB Syncing
  6. Local Development Environment: Varying Vagrant Vagrants
  7. Hosting: WP Engine for Staging & Production via Git Deploy

Do not let this list overwhelm or intimidate you! For Node, Grunt, Bower, SASS, and MySQL Workbench, these are things all developers can learn if they want, and I am going to give you an easy way to get up and running fairly quickly.

Theme

My site is built on the Genesis Framework. Typically I start with my own vanilla child theme to create a website so to make sure I have no unnecessary overhead and bloat. This time, I started with Altitude Child Theme but did some work under the hood to extend its features. These customizations include:

  • Unlimited Front Page Sections: By default, Altitude only allows for seven (7) sections. At one point, I wanted to do nine (9) or ten (10), so I extended this to be able to change my mind easily and often.
  • Filterable Background Image Sections: By default, Altitude allows you to customize this via a filter (altitude_images), which is awesome! Being lazy, I wanted a single line of code to change this. So I switched the functionality to use add_theme_support.
  • Icon Fonts: I love icon fonts like Font Awesome, so I added it to my child theme.
  • Different Primary Menus: For user experience, I wanted the home page menu to use single page navigation via anchors, but on other pages I wanted to go to the actual page or post instead of back to the home page. So on the home page, I display one menu and on other pages I display a different menu.
  • Optimized Script/Style Output: By default, most Genesis child themes output non-minified CSS delegating this functionality for plugins and cache. Since I already minimize my CSS, there is a simple code snippet to use for production sites to output the minified CSS file. The great thing about this is that it removes the information about the theme, which improves privacy.
  • Custom Responsive Menu: Call me vain, but I love great mobile menus. Genesis Child Themes have great mobile menus! But I found one that I simply love, so I wanted to incorporate it into my theme. I will walk through what I did and how I added it to my child theme for anyone else who wishes to do the same.

Plugins

My site features a small list of plugins, namely:

Please let me know if you have noticed anything that I missed!

Update: New Long-Overdue Site

Hello all! I have been away for a long time, sadly and regretfully not doing WordPress as much as I’d like. Instead I was working with SharePoint, which was not nearly as exciting, fun, and flexible that I would have liked. So, now, while I’d like to do more, here is a site that I am definitely more excited about and my first posts back will be all about what I did to create my site.

Enabling & Installing Posts to Posts When a New Blog Is Created

The other day I came across an issue where Posts to Posts requires an administrator or someone with `manage_options` capability in order to install Posts to Posts table on a new blog creation. This does not work if all new sites create the default user as an Editor, and you need to immediately make Posts to Posts available for immediate use.

So here is the code that I used in order to make this possible.

Setting Up a Local Environment via XAMPP: Installing WordPress via Download

4. Download WordPress

Go to wordpress.org and download the latest build of WordPress. Go to the htdocs folder (where you installed the XAMPP), extract the wordpress.zip to a new folder (eg. mywordpress).

5. Run the Famous WordPress 5-minute Installation (install.php)

With your browser, go to http://localhost/mywordpress/wp-admin/install.php or http://localhost:8080/mywordpress/wp-admin/install.php, click Create a Configuration File and click Let’s go! Fill out Database Name (eg., wordpress), User Name (needs to be root), Password, Database Host, and Table Prefix (it is always a best practice to change the default wp_ prefix to something else). Be sure the User Name is the same as your mySQL username, “root”. Then click Run the Install, and follow the instructions to install WordPress. Fill in the Site Title, Username, Password twice, and email. Then click Install, and then Login.