Ahmad Awais

NAVIGATE


SHARE


Code Your First Shortcode in WordPress

Ahmad AwaisAhmad Awais

Shortcode API in WordPress is fun. It helps you create small tags to address a chunk of code. All you do is write some [tag] and it returns the HTML/CSS/PHP code which you have saved inside it. Shortcodes can be used both in the Visual & the Text tab of your post/page editor. Let’s build a basic shortcode. Building shortcodes is fun. A beginner can easily code a shortcode in under one minute. Shortcodes are based upon a philosophy called DRY i.e. Don’t Repeat Yourself. E.g. I link [aboutme] page in my blog posts a lot. Same is the case with [contact] page link. Instead of writing these links each and every time, I have created shortcodes to help me optimize my workflow.

 Coding a Shortcode in WordPress#

The algorithm of using shortcode API in WordPress is quite a simple one. All you have to do is write a function, return something and register a tag, which is then later used to render the shortcode. Let’s take an easy example;

I am going to create a basic shortcode which will help me in linking to my [aboutme] page in form of a shortcode [ aa_me]. So, I registered a function aa_me_shortcode() which is returning some HTML code(the code between return’HTML/CSS_CODE‘;). After that add_shortcode() function is registering [aa_me] against the same aa_me_shortcode() function.

Modify this code, and paste it inside your theme’s functions.php file. At the very end before the closing PHP tag i.e. ?>. Don’t copy the <?php ?> tags from the code.
After saving the file go to the editor and type [aa_me] to render the shortcode. That’s about it. Enjoy building awesome shortcodes.

Two More Shortcodes#

I have coded two more shortcodes for you people. One is for custom placement of Adsense or any other ads code. Other one hides the content inside it from users who are not logged in. Usage examples are given inside the code in a commented form.

Founder & CEO of ⌘ Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory · Creator of Command.new.

"Awais is an awesome example for developers" — Satya Nadella, CEO of Microsoft.

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). Google Developers Expert Web DevRel.

Ex VP Eng (DevTools & DevRel) Rapid · Google Developers Advisory Board (gDAB) founding member · AI/ML/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) ❯ AI/ML Advisory Board San Francisco, DevNetwork.

Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli.

Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs.

❯ Read more about Ahmad Awais or come say hi on 𝕏 @_AhmadAwais.

📨

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 2
  • Khuldoon Hameed
    Posted on

    Khuldoon Hameed Khuldoon Hameed

    Reply Author

    All your posts are great source of information regarding WordPress, Keep posting and at my end i will implement to learn and improve. Thanks


  • Abhishek Sachan
    Posted on

    Abhishek Sachan Abhishek Sachan

    Reply Author

    You taught me something I was looking for from 6 months. It will help me creating WordPress plugins.
    Thanks Ahmed.


Mentions

  • Abhishek Sachan
  • Khuldoon Hameed