Understanding WordPress Shortcodes

A simple explanation of WordPress shortcodes and how to use them in posts and pages.

Tutorial text (extracted)

Understanding WordPress Shortcode
Welcome to this detailed and exhaustive guide to Understanding WordPress Shortcode with a
view to embedding Podbean podcasts into Wordpress. Please note that, although the process
is correct at the time of creation of this guide, changes to the Podbean embed process may
occur. Should such an eventuality happen, it is recommended to seek updated advice on the
Podbean website.



Table of Contents
1.   Decoding Bracket Lingo: Understanding the differences between brackets.             1
2.   Unleashing the Power of WordPress Shortcodes on your Pages.                         2
3.   Transmuting HTML into WordPress Shortcode                                           2
4.   Understanding the code (optional)                                                   3
5.   Next Step: embed Podbean into Wordpress                                             3



     1. Decoding Bracket Lingo: Understanding the differences between
        brackets.


HTML: In website development, HTML (Hypertext markup-language) is used to specify
certain elements on the page. For example, <b>Bold text</b> would result in the text being
bold on an HTML page.



WordPress Shortcode: In WordPress, code using square brackets [ ] can be used to add
shortcode to text boxes, which work in a similar way to HTML, with slightly different
grammar, making it easy to do add special elements, such as Podbean embed codes, to
pages.



The two languages are so similar, some HTML code, such as Podbean embed codes, can be
made to run on WordPress pages simply by changing the angled brackets to squared
brackets.


Note: Using unmodified HTML with angled brackets ‘<>’ on WordPress pages may
cause errors on the page, so always change the brackets over in a program like
Notepad before publishing the page.




   2. Unleashing the Power of WordPress Shortcodes on your Pages.

The good news is WordPress Shortcode with square brackets will only be read and executed
when the page is previewed in WordPress, making it easy and safe to manipulate.



For the PodBean embed code, in addition to changing the angled brackets into square
brackets, we will also be removing the </iframe> HTML tag. The forward slash in this code
example signifies the end of the code, however the WordPress Shortcode will close itself
and therefore does not require this terminus, so it will be deleted.




   3. Transmuting HTML into WordPress Shortcode

To turn HTML code into WordPress Shortcode we will follow this simple set of rules.



   3.1 Remove </iframe> (from the end of the code).

   3.2 Change the first and last bracket to [] square brackets. (from <>)


🎉 Congratulations, we have now successfully converted HTML code into
WordPress Shortcode. See the examples below, the first example is HTML and the
second is Shortcode.


Example:


       <iframe title="Fire and rehire - latest ACAS guide for employers" allowtransparency="true"
       height="150" width="100%" style="border: none; min-width: min(100%, 430px);height:150px;"
       scrolling="no" data-name="pb-iframe-player" src=https://www.podbean.com/player-


       v2/from=embed&i=hwntd-13e4d67-pb&share=1&download=1&fonts=Arial&skin=1&font-
       color=&rtl=0&logo_link=episode_page&btn-skin=7&size=150 loading="lazy"></iframe>




       [iframe title="Fire and rehire - latest ACAS guide for employers" allowtransparency="true"
       height="150" width="100%" style="border: none; min-width: min(100%, 430px);height:150px;"
       scrolling="no" data-name="pb-iframe-player" src=https://www.podbean.com/player-
       v2/from=embed&i=hwntd-13e4d67-pb&share=1&download=1&fonts=Arial&skin=1&font-
       color=&rtl=0&logo_link=episode_page&btn-skin=7&size=150 loading="lazy"]


   4. Understanding the code (optional)

In the above examples, I thought I would go through some of what the code does to make
the code easier to read:


   4.1 An iframe (inline frame) is an HTML element that allows the embedding of external
       content, such as a webpage or multimedia, within another webpage. It is used here to
       embed the Podbean code.



   •   title: Specifies the title of the iframe.
   •   allowtransparency="true" : Allows the iframe to be transparent.
   •   height and width: Set the dimensions of the iframe.
   •   style: Further styling, including removing the border, setting minimum width,
       and fixing the height.
   •   scrolling="no" : Disables scrolling within the iframe.
   •   data-name: Assigns a name to the iframe for identification.
   •   src: Contains the source URL of the Podbean player with various parameters for
       customization.
   •   loading="lazy" : Delays the loading of the iframe until it's about to be displayed
       on the user's screen for better performance.


This code essentially creates a customized iframe for embedding a specific Podbean player
with styling and functionality tailored to the webpage's design and requirements.



   5. Next Step: embed Podbean into Wordpress


To see how to acquire and utilise this code in WordPress, see another of our
illuminating guides in our DMH Stallard library:


>> How to embed Podbean into Wordpress


If you have any questions about this guide, feel free to email me at: david@dwbeck.com

Pages / screenshots

These images are extracted from the PDF pages for easy viewing on the web.