WordPress 4.9, “Tipton”, has finally implemented a much sought after feature, syntax highlighting. What this does is to color code certain attributes in the PHP, Javascript and CSS files. For instance, a CSS id (such as #footer), has a highlight color of dark blue. A property of #footer, like margin-left, is solid black. The value of that property, let’s say 15px, is highlighted in another color, green. This makes it easy to distinguish the different parts of a CSS file so that you can locate the section you are wanting to edit.
Another feature of syntax highlighting is having line numbers in the editor. When using a tool such as Chrome’s element inspector to detect errors, you’ll notice it has its’ own syntax highlighting. This tool shows you the problem file and the line number in that file. This makes it very easy to go into the WordPress theme or plugin editor and pinpoint the exact location of the problem. Of course, if you are directly editing a theme or plugin file you run the risk of having any changes or fixes wiped out upon updating that theme or plugin. There is a warning indicating as much the first time you visit the editor after installing “Tipton”. You can either create a child theme, contact the author, or make note of the changes you have made in case of future updates.
Previous to version 4.9, plugins such as WP Editor and Advanced Code Editor provided similar features in regards to syntax highlighting of theme and plugin files. My preferred plugin was WP Editor for the longest time. However, it has not had any updates for over a year and there is a conflict with another plugin I frequently use, WP Bakery (formerly Visual Composer), which would not allow for saving of any changes when updating a post or page.
Comparing Before and After Syntax Highlighting
Check out the screenshots below to see the difference between WordPress’s basic editor versus the new and improved editor. While it is not a groundbreaking feature, as the aforementioned plugins provided a similar experience, it is a much-welcomed inclusion into the core WordPress package. While nothing can compare to what I find to be the ultimate code-editing / syntax highlighting program, Notepad++. The fact that you can now quickly edit code, without having to FTP or install additional plugins, saves an abundance of time when troubleshooting.
Previous to WordPress 4.9, there was this basic no-frills editor
Behold the glorious new and improved theme & plugin editor!
Other Notable Features in WordPress 4.9
Aside from the editor update, there are a couple of other nifty features as we approach WordPress 5.0. Design workflow has received an overhaul. While we haven’t personally tested these new design features, they certainly look like they will make updating a website design a smooth process. Especially for firms that have a team working on design updates.
Design workflow changes include:
- Design Scheduling – You know how you can schedule a post for a certain time and date? Well, now you can have design changes scheduled. No more needing to stay up until the wee hours of the morning to go live with your new design.
- Design Preview – If you’re worried about feedback from customers or visitors, you can share a preview link of the new design before it goes live.
- Design Locking – How frustrating is it after making multiple changes to a page, to have another team member make their own changes and wipe out everything you did prior? With design locking, you’re assured that when you’re editing, it is impossible for a colleague to overwrite your work.
- Add Media to a Text Widget – With the click of a button you can add images and other media into a text widget. Sure, the good old-fashioned typing in embed codes still works but this certainly simplifies the process.
There are other features as well and if you wish to read about them you can do so here. Obviously, we’re most excited about the syntax highlighting, but overall not a bad update from the WordPress team. WordPress 5.0, scheduled for a 2018 release date, should bring along with it major improvements and features. Until then, happy code editing!