{"id":6112,"date":"2019-12-24T21:11:26","date_gmt":"2019-12-25T02:11:26","guid":{"rendered":"https:\/\/wpcodeus.com\/?p=6112"},"modified":"2025-07-30T10:48:30","modified_gmt":"2025-07-30T15:48:30","slug":"how-to-add-php-code-to-elementor","status":"publish","type":"post","link":"https:\/\/wpcodeus.com\/how-to-add-php-code-to-elementor\/","title":{"rendered":"How To Add PHP Code to Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6112\" class=\"elementor elementor-6112\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ccaf53 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"4ccaf53\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-921811c elementor-widget elementor-widget-text-editor\" data-id=\"921811c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this tutorial we are going to show you how to add PHP Code to Elementor.<\/p><p>At some point you may find yourself needing to add some PHP code to a certain part of a page template that is built using Elementor. Elementor by default however only has elements to add HTML and Javascript and doesn&#8217;t allow the adding of php code into any of those elements or the text block. So today we are going to show you how to add custom php code to any Elementor page by creating a shortcode in your themes functions.php.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e8f93a5 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"e8f93a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7582e99 elementor-widget elementor-widget-heading\" data-id=\"7582e99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create a Shortcode to add PHP Code to Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f6879d elementor-widget elementor-widget-text-editor\" data-id=\"5f6879d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using the WordPress shortcode API guidelines, in your <strong>functions.php<\/strong> file (or other include depending on your theme setup) add the following code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ec1da9 elementor-widget elementor-widget-code-highlight\" data-id=\"2ec1da9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ Shortcode to output custom PHP in Elementor\nfunction wpc_elementor_shortcode( $atts ) {\n    echo \"This is my custom PHP output in Elementor!\";\n}\nadd_shortcode( 'my_elementor_php_output', 'wpc_elementor_shortcode');<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2942e66 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"2942e66\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58523f3 elementor-widget elementor-widget-text-editor\" data-id=\"58523f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tBe sure to name the function and the shortcode something relevant to what you&#8217;re trying to output on the page, this is only a simple example.\n\nIf you need to output multiple custom php functions that is separate from the first you will need to copy the code above and make sure you change the name of the shortcode. You can not have the same name for two different shortcodes.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8459fb7 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"8459fb7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a543ae elementor-widget elementor-widget-heading\" data-id=\"6a543ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add The Shortcode to a Page Using Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-639e940 elementor-widget elementor-widget-text-editor\" data-id=\"639e940\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now that your shortcode has been added and registered it can be called into Elementor using a &#8220;text block&#8221; or the &#8220;shortcode&#8221; widget element. Navigate over to the page that you are wanting to add the custom php to.<\/p><p>From there, add a Elementor shortocode element with your newly created shortcode called within it. For this guide the shortcode is\u00a0<strong>[my_elementor_php_output]<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6259850 elementor-widget elementor-widget-image\" data-id=\"6259850\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"247\" src=\"https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget-1024x247.jpg\" class=\"attachment-large size-large wp-image-6115\" alt=\"A website editor interface shows a shortcode input box on the left with \u201c[my_elementor_php_output]\u201d\u2014demonstrating how to add PHP Code to Elementor\u2014and the same shortcode in a text field on the main page.\" srcset=\"https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget-1024x247.jpg 1024w, https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget-450x109.jpg 450w, https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget-768x185.jpg 768w, https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget-700x169.jpg 700w, https:\/\/wpcodeus.com\/wp-content\/uploads\/2019\/12\/how-add-php-to-elementor-shortcode-widget.jpg 1706w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-694da0f elementor-widget elementor-widget-text-editor\" data-id=\"694da0f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now that the shortcode is in your Elementor page layout, you can view the live results of the page to ensure the output is as expected.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee3fb76 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"ee3fb76\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46230b3 elementor-widget elementor-widget-heading\" data-id=\"46230b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">In Summary<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f00ba51 elementor-widget elementor-widget-text-editor\" data-id=\"f00ba51\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Obviously, there are more possibilities than using echo using this solution; it can be expanded to serve any functionality possible with the WordPress Shortcode API, such as shortcodes that handle attributes.<\/p><p>We here at WP Codeus hope this quick guide helps other people facing the same issue; trying to add your own PHP code to any Elementor page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we are going to show you how to easily add PHP Code to any Elementor page by creating a simple shortcode and adding it to your functions.php<\/p>\n","protected":false},"author":1,"featured_media":6114,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[249,68],"tags":[2711,71,69],"class_list":["post-6112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials","category-code-snippets","tag-elementor","tag-functions-php","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts\/6112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/comments?post=6112"}],"version-history":[{"count":0,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts\/6112\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/media\/6114"}],"wp:attachment":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/media?parent=6112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/categories?post=6112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/tags?post=6112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}