How to Create a Shortcode in WordPress

Sdílet
Vložit
  • čas přidán 30. 07. 2024
  • Learn step-by-step how to create a WordPress shortcode. Start your WordPress website with Hostinger web hosting 👉 bit.ly/3uazx8b
    💥 Use the discount code WP10 to get 10% OFF!
    This WordPress shortcode tutorial demonstrates all the steps to create a shortcode in your WordPress website. All the necessary code snippets are available in the description below - note that the process requires some coding knowledge.
    ____________________________________________
    📚 Get our eBooks!
    Build Your First Website in 9 Easy Steps: bit.ly/3Ce2i4V
    Speed up Your Website: 8 Practical Tips that Work: bit.ly/3F5HRsK
    ___________________________________________
    📌 Handy links
    How to Create a Shortcode in WordPress (In 7 Steps): www.hostinger.com/tutorials/c...
    ____________________________________________
    ⭐ Follow Us ⭐
    TikTok: / hostingeracademy
    Twitter: / hostinger
    Facebook: / hostinger
    WordPress Explained Group: / wpexplained
    Hostinger Tutorials: www.hostinger.com/tutorials
    Subscribe to our channel: czcams.com/users/HostingerAc...
    ____________________________________________
    🕒 Timestamps
    00:00 - Intro
    00:11 - What is WordPress shortcode
    01:21 - Creating a shortcode function
    03:06 - Adding shortcode functionality
    04:12 - Creating an enclosing shortcode
    04:35 - Outro
    ___________________________________________
    A WordPress shortcode is a small piece of PHP code that allows you to quickly add elements to your website’s page and post.
    There are six default WordPress shortcodes:
    👉 Audio
    👉 Playlist
    👉 Gallery
    👉 Video
    👉 Embed
    👉 Caption
    However, you can also create new shortcodes to help you publish articles faster and more efficiently. So, let’s see how to create a custom WordPress shortcode.
    1️⃣ Create a New Theme File
    👉 Access a File Manager or FTP client and create a custom-shortcodes.php file inside your theme’s directory. Add the necessary block of code.
    👉 Save changes and delete the local file option. Then, add the code at the bottom of the functions.php file.
    2️⃣ Create the Shortcode Function
    👉 Open the custom-shortcode.php file and insert the desired action. In this video, we’re adding social media links to a post.
    Right after that, add a callback function so WordPress knows the action is a shortcode:
    3️⃣ Test the Custom Shortcode
    👉 Create a new post on your WordPress website and insert the custom shortcode:
    [subscribe]
    4️⃣ Add Parameters to the WordPress Shortcode
    👉 Open the custom-shortcodes.php file and add a code snippet so that you can customize the links within the shortcode tag.
    5️⃣ Test the Parameters
    👉 Let’s test the parameters by adding the shortcodes to your WordPress post.
    6️⃣ Create an Enclosing WordPress Shortcode
    👉 Open your custom-shortcode.php file and add the necessary lines of code
    7️⃣ Add the Enclosing Shortcode to the Website
    👉 For the Facebook anchor text:
    [subscribe link=' / ' ]Facebook[/subscribe]
    👉 For the Twitter anchor text:
    [subscribe link=' Hostinger?s=20/']Twitter[/subscribe]
    Watch our WordPress shortcode tutorial to see the shortcode’s final result. If you would like to check out the exact code snippets we used, visit the tutorial How to Create a Shortcode in WordPress: www.hostinger.com/tutorials/c...
    ________________________________________
    ▶ Want to see more awesome tutorials like this one in the future? Consider subscribing 😁
    czcams.com/users/HostingerAc...
    ▶ If you have questions, don’t hesitate and join our Facebook group for more help:
    / wpexplained
    ____________________________________________
    Thank you for watching! Let us know in the comments below if you have any questions. Good luck on your online journey. 🚀
    #WordPressShortcode #WordPressShortcodeTutorial #HostingerAcademy

Komentáře • 18

  • @HostingerAcademy
    @HostingerAcademy  Před rokem

    Build your WordPress website today with Hostinger web hosting 👉 bit.ly/3FC9tqA
    💥Use the discount code WP10 to get 10% OFF!

  • @afgdfdgdfddf42
    @afgdfdgdfddf42 Před 2 lety +1

    Thank you for the tutorial Victoria!

  • @yourniftysolutions
    @yourniftysolutions Před 11 měsíci

    My site is hosted on hostinger, stuck at one point. I have multiple shortcodes but want to show in a single page but based on drop-down selection. Currently created a bunch of pages , i.e. a page for a shortcode. Please suggest.

  • @SourabhThakur-mc7ev
    @SourabhThakur-mc7ev Před 4 měsíci

    Nice

  • @royalcrown6287
    @royalcrown6287 Před 5 měsíci

    I want to create a short code for City and State. How to do that?

  • @rajudesai3069
    @rajudesai3069 Před rokem +1

    ok

  • @kentek3141
    @kentek3141 Před rokem

    Ok here is the other side: I've inherited a website to admin and it is strewn with short-codes. How do I find the object represented by the short-code. In the editor all I see is the short-code.

    • @HostingerAcademy
      @HostingerAcademy  Před rokem

      Hey there! You can try using the Gutenberg block editor, which has drag-and-drop functionality and a better visual preview of the content than using WordPress shortcodes. Here's how to use it: www.hostinger.com/tutorials/gutenberg-wordpress 😊
      We hope it helps, but if you have any other questions, please write them here or consider joining our WordPress group on Facebook - a lot of people are ready to help you there: facebook.com/groups/wpexplained 💜

    • @kentek3141
      @kentek3141 Před rokem

      @@HostingerAcademy But that is not what my issue is. I have a whole list of short-code IDs. How do I find the source page that is pointed to. Also, I don't do FB!

  • @profeduardo677
    @profeduardo677 Před rokem

    Hello that such a great video I congratulate you, an apology if there is any mistake in writing, but I am from Mexico, and my English is not very good, I am supporting the translator, and well I would like to see if you were so kind to be able to guide me with the following, I have an online academy with wordpress woocommerce and LernDash, and well my problem is that the payment gateway I do with WooCommerce and then I link the courses with the products, and in the store the products come out, but I really do not like the format it has, I have seen some templates that look great because the photo of the author of the course comes out, the name, etc, but I can't do it in the woocommerce product That's why I thought about touching the PHP code, to see if I could add those data I need, the name of the author, the image if it is enrolled etc, these I guess are shorcodes of lerndash, and well in conclusion not to get dizzy (Jejejeje), It would be how I can add those shorcodes in the WooCommerce product to create a more attractive product sheet, p.s. I can not put the templates that I liked, because they are not compatible with lerndash, thank you very much for the attention you can give to this message, in advance

    • @HostingerAcademy
      @HostingerAcademy  Před rokem

      Hello!
      Thank you so much for sharing your experience with us! We'd love to advise you as much as possible😊
      For starters, you might want to check this page out: wordpress.org/support/topic/add-shortcode-to-product-page-woocommerce/
      Someone has asked a similar question and the answers on the forum post above seem to address the same issue as yours. Hope this helps!

  • @issamehtp
    @issamehtp Před 2 lety +1

    my functions.php file is a bit different .. it just contains
    it oddly ends with an empty line, just below somthing like this :
    // endregion
    new OCEANWP_Theme_Class();
    .. but no ?> so i don't where to put the include line

    • @HostingerAcademy
      @HostingerAcademy  Před 2 lety

      Hey there! If you have some technical questions related to WordPress, consider joining our WordPress group on Facebook - a lot of people are ready to help you there: facebook.com/groups/wpexplained 💜

    • @amritss47
      @amritss47 Před rokem

      did you figure out solution for this? I have same problem

    • @fluke9972
      @fluke9972 Před rokem

      You can just add it in at the very bottom. its a closing tag like in html. Anyway it shouldnt even matter if its there or not. Except if the file contains more then just php like for example html.

  • @morgannice8860
    @morgannice8860 Před rokem

    Nice