Ahmad Awais

NAVIGATE


SHARE


Introducing WordPress Customizer Package For Sublime Text!

Ahmad AwaisAhmad Awais

Customize componentΒ has an incredible PHP and JS based API in the WordPress Core. I found it to be much better than many other elements e.g. the Settings API in WordPress is a bit messy (probably why Scott Clark from 10Up is building the Fields API).

Started With Frameworks#

Anywho, when I first started making Customizer based WordPress themes, I used frameworks like Kirki and Redux Framework, and then later I ended up using Titan Framework for a WordPress plugin calledΒ CF7Customizer.

ProblemΒ With Frameworks#

In the case of these frameworks, it quickly became hard to deal with the updates, backward compatibility, and then code quality especially concerning security. I found myself reading more and more source code to keep up with their development. And then came a time when IΒ felt I should probably go as native as I can to use WordPress APIs instead of such frameworks.

Going Native With WP Customizer API#

I started to figure out what kept me away from using the official WP Customizer API.Β I found out that WP Customizer is not very commonly adopted because of the lack of enough documented examples. Because after going through both Codex and Dev Reference, basic concepts of WordPress customizer were mundanely clear. It was just that the information is so scattered that I always went for simple and to the point frameworks.

Customizer Is Pretty Cool#

Guess what WP Customizer is pretty much what you need to deal with and it is very easy, huge props to the customize component maintainers Weston Ruter, voldemortensen, Nick Halsey, Derek HermanΒ and all the contributors.

WPCustomize Boilerplate#

WPCustomize Boilerplate is something that I will write about in an upcoming article but here’s a bit about it.

To make things better I’ve started to build a WPCustomize Boilerplate, which will be my sandbox for customizer related experiments. Right now, I have added all the coreΒ and advanced controls accompanied with Panels &Β Sections and customizer sanitization routines via WPTRT.

Sublime Package for WordPress Customizer#

Sublime snippets for WordPress Customizer.

GPLΒ Package ControlΒ GitHub release

Stupid-simple, tab-triggered sublime snippets and completions for WordPress Customizer.

I’ve been a big fan of Sublime Text; I use it every day for both frontend and backend programming. Sublime Text has a great deal of potential which helps me automate my dev workflow and build small completions and snippets based libraries.

What if I told you that you can build Customizer options for your next WordPress product (theme/plugin) under 5 minutes? Yes, it is possible! I have made a Sublime Text package for WordPress Customizer that can help you write quality code in a jiffy.

Download From#

Sublime Package ControlΒ GitHubΒ Landing Page

Over time, I have built a good deal of such dev-workflow-automation packages for Sublime Text that I plan to share with the WordPress community, with this package being the first of many.

General Information

WordPress Version: 4.6.0
Snippets: 09
Version: 1.0.4

Snippets

  1. Snippet: WP Customize Add Pannel
    • Tab trigger: wpCustomizerAddPanel
  2. Snippet: WP Customize Add Section
    • Tab trigger: wpCustomizerAddSection
  3. Snippet: WP Customize Add Setting
    • Tab trigger: wpCustomizerAddSetting
  4. Snippet: WP Customize Add Control Basic
    • Tab trigger: wpCustomizerAddControlBasic
  5. Snippet: WP Customize Add Control Image
    • Tab trigger: wpCustomizerAddControlImage
  6. Snippet: WP Customize Add Control Upload
    • Tab trigger: wpCustomizerAddControlUpload
  7. Snippet: WP Customize Add Control Color
    • Tab trigger: wpCustomizerAddControlColor
  8. Snippet: WP Customize postMessage JS Basic
    • Tab trigger: wpCustomizerPostMessageJSBasic
  9. Snippet: WP Customize Register Function
    • Tab trigger: wpCustomizerRegisterFunction

Tab Triggers

You can do a fuzzy search inside PHP or JS file with initials of the snippets’ names. E.g. To add a WP Customizer Add Pannel you can just type wpcap and Sublime will suggest the snippet. If that doesn’t happen, read the optional tip below. You can also open Package Control’s Command Pallet: Command+Shift+P on Mac Ctrl+Shift+P on Windows or Linux and search for these snippets.

How to use the snippets?

WP Customize snippets are meant to bring ease to your workflow. All you have to do is select a snippet and then press tab button to go from one editable area to another. E.g.

WP Customizer Snippets

Optional Tip

Sublime won’t autocomplete in the PHP files when there is no closing ?> tag, so go to Sublime Text > Preferences > Settings-User add this snippet:

"auto_complete_selector": "source, text",

Install Instructions#

Package Control installation

The preferred method of installation is via Package Control.

  1. Install Package Control.
  2. From inside the Sublime Text, open Package Control’s Command Pallet: Command+Shift+P on Mac Ctrl+Shift+P on Windows or Linux.
  3. Type Install Package and hit Return or Enter. A list of available packages will be displayed.
  4. Type WordPress Customizer and hit Return or Enter. The package will be downloaded to the appropriate directory (You can watch the progress bar in the bottom left bar of Sublime).
  5. Restart Sublime Text to complete the installation. The features listed above should now be available.

Manual Installation

  1. Close Sublime Text.
  2. Download or clone this repository to a directory named WordPress-Customizer in the Sublime Text Packages directory for your platform:
    • Sublime Text 3
      • OS X: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/WordPress-Customizer
      • Windows: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git %APPDATA%\Sublime/ Text/ 3/Packages/WordPress-Customizer
      • Linux: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git ~/.config/sublime-text-3/Packages/WordPress-Customizer
    • Sublime Text 2
      • OS X: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/WordPress-Customizer
      • Windows: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git %APPDATA%\Sublime/ Text/ 2/Packages/WordPress-Customizer
      • Linux: git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git ~/.config/sublime-text-2/Packages/WordPress-Customizer
  3. Restart Sublime Text to complete the installation. The features listed above should now be available.

Understand manual installation.

You can manually install by cloning this repository into your Sublime Text Packages directory. Get to it quickly from within Sublime via the menu at Sublime Text > Preferences > Browse Packages.
So, browse the Packages directory in terminal and clone this repository inside it by running the following command.

$ git clone https://github.com/ahmadawais/Sublime-WP-Customizer.git WP-Customizer

Packages directory can be found in

OSX Macbook

WINDOWS

Updates & Changelog

Version 1.0.4

Version 1.0.3

Version 1.0.2

Version 1.0.1

Version 1.0.0

Download From#

Sublime Package ControlΒ GitHubΒ Landing Page

Your Turn#

WPCustomzier-Is-Trending

Last I checked, WordPress Customizer package for Sublime was 32nd most trending Sublime Package with about 250 downloads in just about two weeks. It’s up to you now. I think if you use Sublime do give it a try. If you run into any issues, create a new issueΒ at GitHub or send a Pull Request.Β If you have any questions comment below. Or reach out to me at Twitter @mrahmadawais.

UPDATES:#

  1. WordPress Customizer Package for Sublime Text is now featured on the homepage of PacakgeControl.ioΒ as the 9th most trending package. Yay! ⓦ
  2. SarahΒ featured the package at WPTavern:Β Ahmad Awais Releases WordPress Customizer Package for Sublime TextΒ Yay! ?
  3. WordPress Customizer Package for Sublime Text is the 2nd most relevant and 10th most popular Sublime package for WP.

Founder & CEO of Langbase.com β€” The most powerful serverless AI developer platform for building AI products Β· Ship agentic AI pipes, tools, and memory with BaseAI β€” The first Web AI Framework (free, open-source, local-first, deploys serverless, agentic pipes, tools, and memory)

Ex VP DevTools & DevRel Eng. Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation and VSCode.pro course. Over 142 million views, 24 yrs Blogging, 108K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” Awais is an awesome example for developers.
πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on 𝕏 @MrAhmadAwais

πŸ“¨

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 14