The best code editors for WordPress developers

Hello! Since you are reading this article, it means that you are a WordPress developer, just like me, and strive to make your work with WordPress as productive as possible.

What do we have to do when creating sites on WordPress? We do not just edit PHP files. We should be a programmer and WEB-designer, have the skills to work with HTML, CSS and JavaScript, as it is necessary for a successful WEB-programming.

And a modern IDE or text editor that wants to win the favor of users should provide support for all the necessary languages and technologies.

As a rule, to manage several projects you need a full PHP development environment, such as PhpStorm or CodeLobster. But I also use text editors too, for example if I need to quickly correct a template or modify the code of my function.

Creators of code editors are constantly working on adding new and expanding existing capabilities of their products to support CMS WordPress. Because the community of programmers understand the importance of implementing WordPress support in their software.

I had to spend a lot of time to pick up several IDEs and text editors with advanced features and convenient functionality for WordPress developers.

I suggest you to discover these wonderful programs.

SublimeText

Sublime Text is a fast text editor with a fashionable user interface. It perfectly supports HTML, CSS and JavaScript syntax without additional plug-ins.

To expand the functionality and add tools for WordPress developers, you need to install special packages.

Run the program and go to the main menu “Tools” -> “Install Package Control …”. Package Control is a package that allows you to manage other plug-ins.

After that, you can download, install and remove plug-ins. To start the Package Control, go to the main menu “Preferences” -> “Package Control”.

In order for the program to load the list of available modules, it is necessary to select from the list or enter from the keyboard the command “Install Package”.

Let’s enter “WordPress” in the search bar to filter out the plug-ins specific to this CMS.

From the list, you can immediately select the first “WordPress” package and install it by double-clicking it. This package adds a set of snippets and the ability to auto-complete the functions of WordPress.

Sublime Text

The next plugin we select from the list is called “Search WordPress Codex”. Using it, you can search the official WordPress online help directly from the editor.

For example, right-click on the function and select “WordPress Codex” -> “Search Selection” from the context menu to view online help on it.

Sublime Text

Also there are several popular extensions that you should pay attention to, for example:

  • WordPress snippets – provides a collection of snippets for WordPress programmers.
  • WordPress New Project Config – helps you to create and configure a new project for WordPress CMS.
  • Genesis – facilitates the work of the creators of themes for WordPress, which use the child themes of Genesis.

Atom

Atom is another text editor with a lot of advanced functions and beautiful design. It positions itself as an IDE and successfully competes with other similar programs, such as Sublim Text and Rapid PHP.

Atom is based on themes and packages, so it has a wide range of functions and is flexibly configured. It has its own package manager, which we will use to install WordPress support.

Launch Atom and go to the main menu “File” -> “Settings”. In the opened settings tab, click on “Install”.

Now, to find new packages, enter the keyword “wordpress” in the search field and press “Enter”. You can also click on the “Packages” button.

In the list that appears, let’s choose one of the popular packages, for example – Autocomplete WordPress Hooks. This extension will help the developer by providing the completion of WordPress Actions and Filters.

Find this package in the list and click the “Install” button. After a minute we will see that the package is installed.

Now check the functionality of the just added module. Start type the name of the function and press Ctrl + Space.

Atom Now check the functionality of the just added module. Start type the name of the function and press Ctrl + Space.
Atom

After that, we can also use the hints on the parameters of the function.

Atom

The algorithm for working with other packages is the same. Just read the description, and if the functionality is suitable, install it.

For example, you can install the following add-ons:

  • WordPress API – this add-on greatly speeds up the development process, offering useful WordPress snippets.
  • WordPress Dictionary for Atom – adds snippets for all WordPress functions, including Actions and Filters.

Rapid PHP

Rapid PHP is also a good editor with support of PHP, HTML, CSS and JavaScript. It successfully combines the functionality of the real IDE with high speed.

It is not resource-demanding, has a built-in PHP debugger, supports HTML5, CSS3 and several frameworks, including WordPress.

For higher performance, ability to work with frameworks is disabled by default. To enable WordPress support, go to the main menu “Options” -> “Frameworks”.

In the list that appears, you can select one or more libraries that you want to work with. In this case, choose WordPress and click “OK”.

In the next step, let’s create the project, for that we go to the main menu and select “Project” -> “New Project”.

Now enter the project name and path to the project files. In this example, specify the folder with WordPress installed.

When the project is created, you can view its contents in the right pane of the program using the file browser.

Rapid PHP provides the programmer with ability to use the autocompletion feature when pressing the Ctrl + Space keys.

Rapid PHP
Rapid PHP

You can also trigger an instant prompt on WordPress functions by pressing Shift + Ctrl + Space.

Rapid PHP
Rapid PHP

If in the process of work you need to use the online help for any PHP function, just place the cursor on its name and press the F1 key. The page with online help will be displayed in the browser installed on the system.

CodeLobster

CodeLobster is a functional IDE that provides a complete set of tools for the web developer.

It has an editor of PHP, HTML, CSS and JavaScript with suggestions and autocompletion.

CodeLobster allows you to work with databases directly from the IDE, edit PHP files on the local computer and on a remote server using FTP.

Among other things, you can use PHP debugger, contextual and dynamic help.

There is a convenient function of installing WordPress directly from the program. In addition to that the CMS is installed and configured instantly, much faster than via the WEB-interface.

For example, to create a project, go to the main menu “Project” -> “Create Project …”.

Then in the dialog box, you can specify the type of the project, which will be created using the framework or one of the popular CMS.

Select “Create Empty WordPress Site”, enter the name and specify the location of the directory for installation. Then the New WordPress Site Wizard will run.

It will take only a few steps to configure the connection to the database and at the last step specify the parameters of our blog.

After clicking the “Finish” button, the fresh WordPress distribution will be installed and a new project will be created, you can immediately start working.

If we move the mouse pointer to any function name, we get information about it in a tooltip.

CodeLobster

For full information about this function from the official WordPress documentation, it is enough to select it and press the F1 key.

To use autocompletion, just start typing the name of the function and press Ctrl + Space.

CodeLobster

CodeLobster includes the WordPress plugin in its professional version. That allows the developer to quickly start working with this CMS, since no additional installation is required.

PhpStorm

PhpStorm is a PHP IDE with many convenient features for the web developer. This programming environment is built on the IntelliJ IDEA platform and inherited all the capabilities of the parent platform.

For WordPress programmers, the distribution of the IDE comes with a special plug-in for integration with WordPress.

To start working, you need to register WordPress in the program. Start PhpStorm and go to the main menu “File” -> “Settings …”.

In the settings we will find the section “Languages & Frameworks” and select the “PHP” item. Then in the “Include Path” tab we press the plus button and specify the path to the installed CMS.

The directory with the installation will be indexed, this will allow us to use the WordPress source code when navigating through functions and showing dynamic help.

In addition, you can set the WordPress coding style, which for sure has already became familiar to WordPress developers.

In the program settings window, go to “Editor” -> “Code Style” -> “PHP”. Click on the link “Set from …” and select “Predefined Style” -> “WordPress” from the drop-down list.

Click “OK” to save the settings.

Now consider the process of creation of a new project. In the main menu, select “File” -> “New Project …”.

In the opened dialog, go to the “WordPress Plugin” section and specify the directory for the project and the second one – there the WordPress is installed.

Choose the location of the project in the folder with WordPress. Then click “Create” – so we create a project based on the existing source files.

You should wait a few seconds while PhpStorm scans the files. After that the project is opened and we can continue to study the functions of the program.

To use auto-completion, start entering the name of the function and press Ctrl + Space.

PhpStorm

It is enough just to set the cursor to the function name and press Ctrl + Q to get dynamic help on this function.

PhpStorm

IDE also supports WordPress Actions and Filters. When you press Ctrl + Space, you can quickly get a dynamic hint about the existing parameters.

This review can be completed for now. As you can see, all of the programs in this article have their advantages.

Which one to choose? A simple and lightweight text editor, such as Rapid PHP, or a complex IDE, such as PhpStorm?

I chose CodeLobster, that combines the speed of work, functionality and ease of setting up WordPress projects. I’m happy to add it to my set of web development tools.

It’s very interesting to know what your favorite editor is? Do you create sites on WordPress, or use another CMS? I suggest sharing your experience with other readers. I really look forward to your comments.

 

Best Sublime Text 3 Themes

Boxy theme

Boxy Tomorrow ★ Numix

Boxy Tomorrow ★ Numix

The screenshot above shows next options in action:

The operating system is Ubuntu. The font used for the code is Fira Code. The UI font is Fira Code (via addon)

Installed packages:

Nice themes for my liked editor it is: https://packagecontrol.io/search/boxy

https://github.com/ihodev/sublime-boxy

ctrl + shift + p or cmd + shift + p Look for Package Control: Install Package Search for the theme and hit enter Set the theme in Preferences -> Settings – User by editing the json property called theme

Source: Best Sublime Text 3 Themes of 2015 and 2016 ― Scotch

DA UI

DA UI is a set of beautiful, clean, elegant interface and syntax themes for Sublime Text 3. It brings you the most flexible way to customize the look and feel of your text editor.

The font used for the code is Operator Mono.

Get It

  1. Choose Command Palette › Package Control: Install Package.
  2. Find DA UI and hit Enter.
  3. Choose Command Palette › UI: Select Theme.
  4. Find DA.sublime-theme and hit Enter.
  5. Choose Command Palette › UI: Select Color Scheme.
  6. Find your favorite one.
  7. Enjoy!

Install A File Icon package for support of the file-specific icons.
An alternative icon pack will be available in the next release

 

Sublime Text 3 Keyboard Shortcuts

Source: https://www.cheatography.com/tdeyle/cheat-sheets/sublime-text-3/

General

Command Pallete
CTRL + SHIFT + P
Show­/Hide Console
CTRL + `
Show­/Hide Sidebar
CTRL + K, B
Redo Last Keyboard Shortcut
CTRL + Y
Select Autoco­mplete Sugges­tion
CTRL + SPACE

Window Manipu­lation

Full­scr­een
F11
Dist­raction Free Mode
Shift + F11
New Window
CTRL + SHIFT + N
New Tab
CTRL + N
Select A Tab
ALT + TAB NUMBER
Close Tab
CTRL + W
Move Tab to Pane
CTRL + SHIFT + PANE NUMBER
Switch to Pane
CTRL + PANE NUMBER

Layout

2, 3, 4 Column
ALT + SHIFT + 1/4
2 or 3 Row
ALT + SHIFT + 8/9
4 Grid
ALT + SHIFT + 5
Split Pane in Half
CTRL + K, CTRL + SHIFT + UP

Pane Manipu­lation

Move to Panel
CTRL + PANEL NUMBER
Move File to Panel
CTRL + SHIFT + Panel Number

Navigation

Quick Open File
CTRL + P
Open File, Search Symbol
CTRL + P, @
Go to Symbol
CTRL + R
Go to Line
CTRL + G
Go to Next Tab
CTRL + PGDOWN
Go to Previous Tab
CTRL + PGUP
Jump to Closing Parent­hesis
CTRL + M

Find & Replacing

Find
CTRL + F
Find Next
F3
Find Previous
SHIFT + F3
Replace Every Select­ion
After selecting, ALT + F3
Repl­ace
CTRL + H
Incr­emental Search
CTRL + I
Find in Files
CTRL + SHIFT + F
Find then Multi-­Edit
CTRL + F, ALT + Enter
Use Selection for Find Field
CTRL + E
Use Selection for Replace Field
CTRL + SHIFT + E

Selecting Text

Line
CTRL + L
Word
CTRL + D
Quick Select Next Iterat­ion
CTRL + D
UnSelect Next Iterat­ion
CTRL + U
Skip, and Select the Next Iterat­ion
CTRL + K, D
Pare­nthesis Content
CTRL + SHIFT + M
Inde­ntation Content
CTRL + SHIFT + J
Column Selection Up
CTRL + ALT + UP
Column Selection Down
CTRL + ALT + DOWN
Mult­i-S­elect Editing
CTRL + CLICK

Editing

Delete Line
CTRL + SHIFT + K
Delete From Cursor to EOL
CTRL + K, K
Delete From Cursor to BOL
CTRL + K, BKSP
Delete Word Forwards
CTRL + DEL
Delete Word Backwa­rds
CTRL + BKSP
Move Line Up
CTRL + SHIFT UP
Move Line Down
CTRL + SHIFT + DOWN
Insert Line Before
CTRL + SHIFT + ENTER
Insert Line After
CTRL + ENTER
Indent Current Line
CTRL + ]
UnIndent Current Line
CTRL + [
Dupl­icate Line
CTRL + SHIFT + D
Join Line Below Current Line
CTRL + J
Paste With Proper Indent­ation
CTRL + SHIFT + V
Tran­spose
SELECT ITEMS, CTRL + T

Transform

To Upperc­ase
CTRL + K, U
To Lowerc­ase
CTRL + K, L
Increase Font Size
CTRL + PLUS
Decrease Font Size
CTRL + MINUS

Bookmarks

New Bookmark
CTRL + F2
Next Bookmark
F2
Previous Bookmark
SHIFT + F2
Clear Bookma­rks
CTRL + SHIFT + F2

Code Folding

Fold Select­ion
CTRL + SHIFT + [
UnFold Select­ion
CTRL + SHIFT + ]
Fold All
CTRL + K, 1
UnFold All
CTRL + K, J
Fold Level
CTRL + 2/9

Commenting

Comment Line
CTRL + /
Block Comment
CTRL + SHIFT + /

 

Sublime Text (3) for PHP Developers

Sublime Text (3) for php Developers Posted on June 26, 2015 | By Matt Stauffer A lot of folks in the php community have been checking out PHPStorm lately, including myself and most of the developers I work with. We love the code intelligence we get from PHPStorm, but still miss the speed, quick boot-up, and convenience of Sublime Text. Before I blindly assume PHPStorm is the only way to go, I wanted to see: Can I bring the things a PHP-focused IDE provides PHP developers back to Sublime Text and ge

Source: Sublime Text (3) for PHP Developers – Matt Stauffer on Laravel, PHP, Frontend development

SublimeText 3 tips and customization

One of best text editor for Linux and W$ bellow some tips and usefully configuration

Regexp conversion to Wiki links

Conversion to Wiki links add [ before and ] after text.

Find what: (http.{2,})
Relpace to: [\1]

Polish letters

Polskie znaki diakrytyczne w Sublime Text 3 – dodanie wpisów do Key Bindings – User (na platformie Windows jest to plik Default (Windows).sublime-keymap):

Adding comma to each line using sublime text

To add comma to any line

  1. Select the lines you want to modify
  2. CTRL + SHIFT + L
  3. RIGHT_ARROW
  4. COMMA

Using ctrl + shift + L is how you can modify all selected lines. Very handy 🙂 Make batch edits with Multiple Selections.

Column Selection can be used to select a rectangular area of a file. Column selection doesn’t operate via a separate mode, instead it makes use of multiple selections.

You can use additive selections to select multiple blocks of text, or subtractive selections to remove a block.

‘Find What’: $ // matching all ends of your lines
‘Replace With’: , // replaces all line ends with a coma

Solve this problem

Links

  • https://www.shortcutfoo.com/blog/sublime-text-3-gifs-cheat-sheet/
  • https://forum.sublimetext.com/t/my-sublime-text-windows-cheat-sheet/8411

Source: Best of Sublime Text 3: Features, Plugins, and Settings | Scotch

Sublime Text 3 is an amazing piece of software. To start, it is a clean, functional, and fast code editor. Not only does it have incredible built in features (multi-edit and vim mode), but it has support for plugins, snippets, and many other things.

Source: Best of Sublime Text 3: Features, Plugins, and Settings | Scotch

Sublime Text 2 tips for Python and web developers

Update 2014-03: Please see updated blog post for Sublime Text 3. Sublime Text 2 is a very powerful text editor which has gained popularity recently – for good reasons. It is commercial (59 USD). Plenty of power comes from the fact that Sublime has a plug-in framework built in Python. Even though the core app remains closed there exist a vibrant plug-in ecosystem around the editor. Note: You can try Sublime for free. It simply

Źródło: Sublime Text 2 tips for Python and web developers

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑