{"id":36066,"date":"2024-04-17T14:22:22","date_gmt":"2024-04-17T14:22:22","guid":{"rendered":"https:\/\/10web.io\/blog\/?p=36066"},"modified":"2024-04-24T11:15:21","modified_gmt":"2024-04-24T11:15:21","slug":"how-to-use-shortcode-in-wordpress","status":"publish","type":"post","link":"https:\/\/10web.io\/blog\/how-to-use-shortcode-in-wordpress\/","title":{"rendered":"How to Use Shortcode in WordPress: 6 Proven Methods"},"content":{"rendered":"

Shortcodes in WordPress are a powerful feature that allows users to execute code within posts, pages, and widgets without having to write lengthy code each time. Whether you’re looking to embed files, create objects, or execute functions, shortcodes streamline the process, making it accessible even for those with limited coding knowledge. <\/span><\/p>\n

This guide will walk you through the various ways you can add shortcodes to your WordPress site, from inserting them in posts and pages to integrating them into theme files. <\/span><\/p>\n

FAQ<\/span><\/h2>\n

\n

How do I enter a shortcode in WordPress?<\/p>\n

To enter a shortcode in WordPress, simply add the shortcode in square brackets directly into your post, page, or widget content area. For example, if you have a shortcode to display a gallery, you would type the specific shortcode where you want the gallery to appear. Save or update the content, and the shortcode will execute and display the desired content or functionality when viewed on your site. <\/div>\n<\/div>\n
\n
\n

How do I use shortcode in WordPress menu?<\/p>\n

To use a shortcode in a WordPress menu, you’ll need to add custom code to your theme’s functions.php<\/span> file to enable shortcode processing in menu items. After doing so, you can insert the shortcode directly into the Navigation label field of your menu item in the WordPress menu editor. <\/div>\n<\/div>\n
\n
\n

How do I link a shortcode button in WordPress?<\/p>\n

To link a shortcode button in WordPress, if the shortcode supports it, you can include the URL directly in the shortcode like this:<\/span><\/p>\n

[button_shortcode url=”https:\/\/example.com”]Button Text[\/button_shortcode] <\/span><\/span><\/p>\n

Replace https:<\/span>\/\/example.com<\/span> with your desired URL and adjust the shortcode as necessary. <\/div>\n<\/div>\n<\/span><\/p>\n

Key characteristics and use cases of shortcodes<\/span><\/h2>\n

Key characteristics<\/span><\/h3>\n
    \n
  • Simplicity: Users can add functionalities such as embedding media, creating galleries, or displaying content that requires complex PHP code just by typing a simple shortcode.<\/span><\/li>\n
  • Flexibility: Shortcodes can be used in posts, pages, and widgets, offering a versatile solution for adding dynamic content across a site.<\/span><\/li>\n
  • Customizability: Apart from the default shortcodes that come with WordPress or plugins, users can create custom shortcodes to perform specific tasks or display custom content, tailored to the needs of their website.<\/span><\/li>\n<\/ul>\n

    Common uses of shortcodes<\/span><\/h3>\n
      \n
    • Embedding media: Shortcodes can be used to easily embed media files like videos and audio files directly into posts or pages.<\/span><\/li>\n
    • Creating galleries: With a shortcode, users can create beautiful image galleries by simply specifying the IDs of the images they want to include.<\/span><\/li>\n
    • Displaying content conditionally: Some shortcodes can check for certain conditions (like user login status) and display content accordingly.<\/span><\/li>\n
    • Integrating plugins: Many plugins provide shortcodes to integrate their features into your site seamlessly. For example, a shortcode from a contact form plugin to display a form anywhere on your site.<\/span><\/li>\n<\/ul>\n

      How to use shortcode in WordPress?<\/h2>\n

      Method 1: Adding a shortcode in WordPress posts and pages<\/b><\/h3>\n

      Adding a shortcode to your WordPress content allows you to insert custom dynamic elements developed by plugins or themes. Here\u2019s a step-by-step guide to doing this efficiently:<\/span><\/p>\n

        \n
      1. Navigate to your WordPress dashboard.<\/span><\/li>\n
      2. Go to <\/span>Posts<\/b> or <\/span>Pages<\/b> depending on where you want to add the shortcode.<\/span><\/li>\n
      3. Choose to either create a new item or edit an existing one.<\/span><\/li>\n
      4. Click the <\/span>+<\/b> button at the top of the editor to open the block library.<\/span><\/li>\n
      5. Type <\/span>Shortcode<\/b> in the search bar or find it under the <\/span>Widgets<\/b> section to add the Shortcode block to your content.
        \n\"Adding
        \n<\/span><\/li>\n
      6. Click inside the Shortcode block where it says Write shortcode here\u2026.<\/span><\/li>\n
      7. Enter the actual shortcode you wish to use (e.g., <\/span>[your_shortcode]<\/span>). Make sure you replace <\/span>[your_shortcode]<\/span> with the shortcode provided by your plugin or theme.<\/span><\/li>\n
      8. Use the <\/span>Preview<\/b> button to see how the shortcode executes in the context of your content. This step helps ensure it works as expected and looks integrated.<\/span><\/li>\n
      9. Adjust the positioning within the content or tweak the surrounding text to better accommodate the shortcode output.<\/span><\/li>\n
      10. Once you are satisfied with the preview, click <\/span>Publish<\/b> (for new posts or pages) or <\/span>Update<\/b> (if you are editing an existing one) to make the changes live.<\/span><\/li>\n<\/ol>\n
          <\/ol>\n

          Adding shortcodes in WordPress editor is straightforward and does not require direct editing of HTML or PHP code, making it accessible for users without programming knowledge.<\/span><\/p>\n

          Method 2: Adding a shortcode in WordPress sidebar widgets<\/b><\/h3>\n

          Incorporating a shortcode into a sidebar widget can enhance your site’s functionality by allowing custom content from plugins to be displayed within the sidebar. Follow these steps to do so effectively:<\/span><\/p>\n

            \n
          1. Access your WordPress dashboard.<\/span><\/li>\n
          2. Select <\/span>Appearance<\/b> from the left sidebar, and then click on <\/span>Widgets<\/b>. This will take you to the widgets management area.<\/span><\/li>\n
          3. Locate the <\/span>Shortcode<\/b> widget in the available widgets list.<\/span><\/li>\n
          4. Drag and drop the widget into your desired sidebar area on the right. This area might be labeled as <\/span>Main sidebar,<\/b> Footer<\/b>, or another custom sidebar depending on your theme.
            \n\"Adding
            \n<\/span><\/li>\n
          5. In the text area provided within the widget, enter the shortcode you want to use (e.g., <\/span>[your_shortcode]<\/span>). Replace <\/span>[your_shortcode]<\/span> with the specific shortcode that triggers the desired functionality.<\/span><\/li>\n
          6. Click the <\/span>Save<\/b> button on the widget to apply the changes.<\/span><\/li>\n
          7. Visit the front-end of your website to view the shortcode\u2019s output in the sidebar. This ensures it is working correctly and integrates well with your site\u2019s design.<\/span><\/li>\n<\/ol>\n
              <\/ol>\n

              This method allows you to enhance sidebars with custom content managed through shortcodes, offering more flexibility in how content is displayed site-wide.<\/span><\/p>\n

              Method 3: Adding a shortcode in the old WordPress classic editor<\/b><\/h3>\n

              If you’re still utilizing the classic editor in WordPress, here’s a guide to inserting shortcodes into your posts and pages.<\/span><\/p>\n

              Open the post or page for editing where you need to include the shortcode. You can place the shortcode anywhere within the content editor where you’d like it to appear. Ensure that the shortcode is on a separate line.
              \n\"Adding
              \n<\/span><\/p>\n

              Remember to save your modifications. Then, preview your post or page to check how the shortcode works.<\/span><\/p>\n

              Method 4: Adding a shortcode in WordPress theme files<\/b><\/h3>\n

              For more advanced customization, you might want to insert a shortcode directly into the theme files. This approach is suitable for users familiar with PHP and file management. Follow these steps to ensure a safe and effective implementation:<\/span><\/p>\n

                \n
              1. Always start by backing up your WordPress site. This precaution ensures you can restore the original state if anything goes wrong during the editing process.<\/span><\/li>\n
              2. Use an FTP client to connect to your server and navigate to the <\/span>\/wp-content\/themes\/your-theme\/<\/span> directory, where <\/span>your-theme<\/span> is the directory of the theme you are using.<\/span><\/li>\n
              3. Alternatively, you can access the theme files directly from the WordPress dashboard by going to <\/span>Appearance<\/b> > <\/span>Theme editor<\/b>.<\/span><\/li>\n
              4. Identify the PHP file where you want the shortcode to appear. Common files for this purpose include <\/span>sidebar.php<\/span>, <\/span>footer.php<\/span>, or <\/span>header.php<\/span>.<\/span><\/li>\n
              5. Open the file for editing.<\/span><\/li>\n
              6. Place the following PHP code where you want the shortcode\u2019s output to appear in the file:<\/span> <\/span><\/li>\n<\/ol>\n
                echo<\/span> do_shortcode<\/span>(<\/span>'[your_shortcode]'<\/span>);<\/span><\/pre>\n
                  \n
                1. Replace <\/span>[your_shortcode]<\/span> with the specific shortcode you are implementing.<\/span><\/li>\n
                2. Save the changes to the PHP file.<\/span><\/li>\n
                3. Visit your site to confirm that the shortcode executes correctly and displays as intended within the theme structure.<\/span><\/li>\n<\/ol>\n
                  This method is powerful but requires caution. Always back up your site before making changes to theme files.<\/span><\/p>\n
                  Method 5: Adding a shortcode in block theme files with the full-site editor<\/b><\/h3>\n
                  The Full Site Editor (FSE) in WordPress represents a significant evolution in theme customization, allowing for direct editing of templates through a block-based interface. Follow these steps to integrate shortcodes into your block theme effectively:<\/span><\/p>\n
                    \n
                  1. Navigate to your WordPress dashboard.<\/span><\/li>\n
                  2. Go to <\/span>Appearance<\/b> and select <\/span>Editor<\/b>. This will open the Full Site Editor.
                    \n\"Adding
                    \n<\/span><\/li>\n
                  3. Within the FSE, you’ll see your site’s template structure displayed visually.
                    \n\"Selecting
                    \n<\/span><\/li>\n
                  4. Click on the area where you want to add the shortcode to bring up the block inserter tool.<\/span><\/li>\n
                  5. Search for and select the <\/span>Shortcode<\/b> block from the list of available blocks.<\/span><\/li>\n
                  6. Place the Shortcode block in the desired location within your template.
                    \n\"Adding
                    \n<\/span><\/li>\n
                  7. Click inside the Shortcode block and type the shortcode you want to use (e.g., <\/span>[your_shortcode]<\/span>).<\/span><\/li>\n
                  8. Replace <\/span>[your_shortcode]<\/span> with the specific shortcode provided by your plugin or custom code.<\/span><\/li>\n
                  9. After entering the shortcode, click the <\/span>Save<\/b> button at the top right to save your changes to the template.<\/span><\/li>\n
                  10. Ensure to save the overall changes to the site if prompted, which may include updating other template parts or global styles.<\/span><\/li>\n<\/ol>\n
                      <\/ol>\n
                        <\/ol>\n
                          <\/ol>\n
                          This method integrates shortcodes seamlessly into the block-based theme structure.<\/span><\/p>\n
                          Method 6: Creating your own custom shortcode in WordPress<\/b><\/h3>\n
                          Creating custom shortcodes allows you to add unique functionality to your WordPress site that can be reused across posts, pages, or widgets. Follow these steps to create and use a custom shortcode effectively:<\/span><\/p>\n
                            \n
                          1. Decide whether to add the custom code directly to your theme\u2019s <\/span>functions.php<\/span> file or a site-specific plugin. Using a plugin is generally safer because your changes will persist even if you change your theme.<\/span><\/li>\n
                          2. Open your <\/span>functions.php<\/span> file or your custom plugin file.<\/span><\/li>\n
                          3. Define a new function that encapsulates the functionality you want to add. For example, to display the current year:<\/span><\/li>\n<\/ol>\n
                            function<\/span> show_current_year<\/span>() {<\/span>\r\n\r\n <\/span>return<\/span> date<\/span>(<\/span>'Y'<\/span>)<\/span><\/pre>\n
                              \n
                            1. Below the function, use the <\/span>add_shortcode()<\/span> function to register your new shortcode with WordPress:<\/span><\/li>\n<\/ol>\n
                              add_shortcode<\/span>(<\/span>'current_year'<\/span>, <\/span>'show_current_year'<\/span>);<\/span><\/pre>\n
                                \n
                              1. The first parameter is the shortcode tag (<\/span>current_year<\/span>), which users will type within brackets (e.g., <\/span>[current_year]<\/span>) in their posts or widgets.<\/span><\/li>\n
                              2. The second parameter is the name of the function you just defined (<\/span>show_current_year<\/span>).<\/span><\/li>\n
                              3. Now, you can insert <\/span>[current_year]<\/span> in posts, pages, widgets, or even in PHP files through the <\/span>do_shortcode(‘[current_year]’);<\/span> function. This shortcode will output the current year wherever it is used.<\/span><\/li>\n<\/ol>\n
                                By following these instructions, you can create a versatile shortcode that adds significant functionality to your WordPress site.<\/span><\/p>\n
                                  \n
                                • If you decide to use a plugin, you have to install the WPcode plugin.
                                  \n\"Installing
                                  \n<\/span><\/li>\n<\/ul>\n
                                    \n
                                  • After it is activated find the <\/span>Code snippets<\/b> choose <\/span>+ Add snippet<\/b> and add the code there.
                                    \n\"Adding
                                    \n<\/span><\/li>\n<\/ul>\n
                                    Shortcodes vs. Gutenberg blocks<\/b><\/h2>\n
                                    When deciding between using shortcodes and Gutenberg blocks in WordPress, consider the following key points:<\/span><\/p>\n
                                    Gutenberg blocks offer a visual, user-friendly interface perfect for those who prefer to see changes as they happen. They integrate seamlessly with WordPress’s site-wide editing features and are designed with accessibility in mind, making them a great choice for users who value intuitive design and ease of use.<\/span><\/p>\n
                                    Shortcodes, on the other hand, are ideal for those comfortable with coding. They offer flexibility for embedding specialized functionalities that blocks might not support. Shortcodes are also crucial for ensuring older themes or legacy content remains functional, providing an essential tool for long-standing WordPress sites.<\/span><\/p>\n
                                    The difference between blocks and shortcodes <\/span><\/h3>\n\n\n\n\n\n\n\n
                                    <\/td>\nShortcodes<\/b><\/td>\nGutenberg blocks<\/b><\/td>\n<\/tr>\n
                                    User interface preference<\/span><\/td>\nCode based approach<\/span><\/td>\nFor visual editing<\/span><\/td>\n<\/tr>\n
                                    Functionality needs<\/span><\/td>\nCustom integrations<\/span><\/td>\nGeneral content and design<\/span><\/td>\n<\/tr>\n
                                    Technical proficiency<\/span><\/td>\nFor advanced users<\/span><\/td>\nFor users with less expertise<\/span><\/td>\n<\/tr>\n
                                    Compatibility\u00a0<\/span><\/td>\nWide range of themes and plugins<\/span><\/td>\nBlock-compatible themes and plugins<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                                    Conclusion<\/span><\/h2>\n
                                    Shortcodes are an integral feature of WordPress that provides a streamlined approach to adding dynamic content and functionality to your website. By understanding how to add and customize shortcodes, you can significantly enhance the user experience and efficiency of your site management. <\/span><\/p>\n
                                    Whether through simple additions in posts and widgets or by integrating custom code into your theme files, the flexibility of shortcodes is invaluable. As WordPress continues to evolve, particularly with the increasing use of the Block Editor, shortcodes remain a fundamental tool for both novice and experienced developers, bridging ease of use with powerful website customization.<\/span>
                                    \n\r\n