{"id":9813,"date":"2024-09-24T16:43:08","date_gmt":"2024-09-24T16:43:08","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=9813"},"modified":"2026-04-22T16:46:49","modified_gmt":"2026-04-22T16:46:49","password":"","slug":"insert-shortcodes","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/insert-shortcodes\/","title":{"rendered":"Displaying Shortcodes in the WordPress Editor"},"content":{"rendered":"\n<p>When using Kadence Elements, custom Shortcodes, or Shortcodes from third-party plugins, it may be necessary to display them using the WordPress Block Editor. Gutenberg provides the Shortcode Block to achieve this. ShortCode Blocks can be added to posts, pages, elements, widgets, and to anywhere the Block Editor is available.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id9813_bbac3e-8f .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id9813_bbac3e-8f .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id9813_bbac3e-8f .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id9813_bbac3e-8f .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec, .wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec[data-kb-block=\"kb-adv-heading9813_5eeb2a-ec\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec[data-kb-block=\"kb-adv-heading9813_5eeb2a-ec\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading9813_5eeb2a-ec[data-kb-block=\"kb-adv-heading9813_5eeb2a-ec\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading9813_5eeb2a-ec wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading9813_5eeb2a-ec\">Using the Gutenberg ShortCode Block<\/h2>\n\n\n\n<p>To add a shortcode in the editor, first, insert a <strong>Shortcode<\/strong> <strong>Block<\/strong> into the page. This block enables shortcode input and ensures it is executed on the front end. A Shortcode Block can be added anywhere blocks are available, such as in the Post Editor or Widgets.<\/p>\n\n\n<style>.kb-image9813_e8d0a3-38.kb-image-is-ratio-size, .kb-image9813_e8d0a3-38 .kb-image-is-ratio-size{max-width:623px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image9813_e8d0a3-38.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image9813_e8d0a3-38 .kb-image-is-ratio-size{align-self:unset;}.kb-image9813_e8d0a3-38 figure{max-width:623px;}.kb-image9813_e8d0a3-38 .image-is-svg, .kb-image9813_e8d0a3-38 .image-is-svg img{width:100%;}.kb-image9813_e8d0a3-38 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image9813_e8d0a3-38\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"488\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Shortcode-Block.gif\" alt=\"Shortcode Block\" class=\"kb-img wp-image-9814\" \/><\/figure><\/div>\n\n\n\n<p>Inside the <strong>Shortcode<\/strong> <strong>Block<\/strong>, enter the text of the shortcode you wish to use, then save the changes.<\/p>\n\n\n<style>.kb-image9813_d538f5-22 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image9813_d538f5-22\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"360\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Adding-Shortcode.gif\" alt=\"Adding Shortcode\" class=\"kb-img wp-image-9815\" \/><\/figure><\/div>\n\n\n\n<p>On the <strong>Front<\/strong> <strong>End<\/strong> of the page, the <strong>Shortcode<\/strong> will be <span style=\"text-decoration: underline\">executed<\/span>.<\/p>\n\n\n<style>.kb-image9813_30009e-6f.kb-image-is-ratio-size, .kb-image9813_30009e-6f .kb-image-is-ratio-size{max-width:738px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image9813_30009e-6f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image9813_30009e-6f .kb-image-is-ratio-size{align-self:unset;}.kb-image9813_30009e-6f figure{max-width:738px;}.kb-image9813_30009e-6f .image-is-svg, .kb-image9813_30009e-6f .image-is-svg img{width:100%;}.kb-image9813_30009e-6f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image9813_30009e-6f\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1302\" height=\"672\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode.jpg\" alt=\"Executed Shortcode\" class=\"kb-img wp-image-9816\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode.jpg 1302w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode-300x155.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode-1024x529.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode-768x396.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Executed-Shortcode-360x186.jpg 360w\" sizes=\"auto, (max-width: 1302px) 100vw, 1302px\" \/><\/figure><\/div>\n\n\n\n<p><em>*Please note that in this example, the Shortcode added comes from the WooCommerce plugin*<\/em><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60, .wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60[data-kb-block=\"kb-adv-heading9813_3e4d94-60\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60[data-kb-block=\"kb-adv-heading9813_3e4d94-60\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading9813_3e4d94-60[data-kb-block=\"kb-adv-heading9813_3e4d94-60\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading9813_3e4d94-60 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading9813_3e4d94-60\">Using Element Shortcodes (Pro)<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">Kadence Theme Kit Pro<\/a> offers <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/what-is-kadence-elements\/\">Hooked Elements<\/a>. Each Kadence Element generates a shortcode that can be used to display the Element. To find the shortcode for a specific Element, navigate to <strong>Dashboard<\/strong> \u2192 <strong>Appearance<\/strong> \u2192 <strong>Kadence<\/strong> \u2192 <strong>Elements<\/strong>.<\/p>\n\n\n<style>.kb-image9813_0b3dd5-e8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image9813_0b3dd5-e8 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1866\" height=\"861\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode.jpg\" alt=\"Element Shortcode\" class=\"kb-img wp-image-9817\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode.jpg 1866w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode-300x138.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode-1024x472.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode-768x354.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode-1536x709.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/09\/Element-Shortcode-360x166.jpg 360w\" sizes=\"auto, (max-width: 1866px) 100vw, 1866px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When using Kadence Elements, custom Shortcodes, or Shortcodes from third-party plugins, it may be necessary to display them using the WordPress Block Editor. Gutenberg provides the Shortcode Block to achieve this. ShortCode Blocks can be added to posts, pages, elements, widgets, and to anywhere the Block Editor is available. Using the Gutenberg ShortCode Block To&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-9813","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":184,"total_views":"3364","reactions":{"happy":"0","normal":"0","sad":"4"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/9813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=9813"}],"version-history":[{"count":2,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/9813\/revisions"}],"predecessor-version":[{"id":10847,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/9813\/revisions\/10847"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=9813"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=9813"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=9813"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=9813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}