Add shortcode via customizer field

Pinegrow WP
1

Hi there,
Has anyone manage to add shortcodes from the customizer fields?

I use a static homepage and a page template for the contact page and looking for a way to inject shortcodes so the end user can easily add and remove elements via shortcodes.

The most ideal way would be to add a customizer field so the user can just copy past the shortcode in the text field.

2

Just to clarify, you want the user to be able to enter 1, or more than 1 shortcode?
Basically, you want the user to create all, or just a portion of the page content?

3

I want the user to enter multiple shortcodes.
The idea is to add Elementor shortcodes so the user can add entire sections.

On a normal page this is not a problem because you just add it on the page but on a static homepage or a page template it’s a different story.

Now i have 2 ways of adding it :

  • With php code but that’s not what i need because the user can’t change the shortcode and i have to do it for them.
  • I add sidebars and use text widgets to add the shortcode (here the user can change the shortcode)
    But the widget areas gets so messy with many widget areas so that’s why i am looking for a way to do it with the customizer so i can have the shortcodes in the customizer and just have the normal widgets in the widget areas to keep it clean.
4

So, you can have custom php in your template page through Pinegrow.

  1. Edit the page to add in a section where the content will go, for example a div. You can style this to have the expected positioning and dimensions.
  2. Select the newly added field and add a Customizer Field action. Set it to edit the content. You can choose to use the textarea field if you like. For the id I used ‘shortcode_area’.
  3. Now in that same section add a Function action. For the Function select Custom code. For the Custom code enter:
    $xx_shortstring = get_theme_mod('shortcode_area'); echo do_shortcode( $xx_shortstring );
    Where the “xx” in the variable is the prefix you are using for your theme, and the name in get_theme_mod is your Customizer Field id.

This will allow you to put in as many shortcodes as you want. You may have to fool around to get the look just right if entering multiple shortcodes.

1 Like
5

Awesome thank’s a lot , it’s working!
Is it possible to get this working on a page template such as a static contact page , i just can’t get the customizer to work on a page template at all.

A side question :
On the next major HTML to wordpress conversion tutorial could you please convert a theme using a static homepage and own blog page with styled widgets?

All old tutorials are always using the latest blog posts as homepage and there is nothing using a static page and a blog page.

The reason i ask this is a lot of the times when i convert HTML to wordpress i get tons a Pinegrow cashes and a lot of problems with the different loops such as main loop and custom post loops.I keep wasting time on things that i know works but suddenly it don’t work.

After going back and forth changing things and then changing it back to the way it was it suddenly works again , i keep having these weird issues with the various post loops.I can’t replicate it because suddenly it works so it’s pretty annoying.

So it would be awesome to watch how you would do the same things i am doing to see if you do it in a different way or if you do it the same way and get the same problems as me.

I can provide a HTML theme if you should need one.

6

Not sure I quite understand the new difficulty. Can you send me the template you are trying to get it to work on?

7

Never mind ,again this is just some weird bug.
Removed the customizer section and customizer field and added it again and now it suddenly works , it’s the same i have so often with the various loops.

8

Hi, can I get some help on this one? I keep getting a fatal error message. See below:

Fatal error: Uncaught Error: Call to undefined function igshortcode() in /Users/Victoria/Local Sites/beta-sites/app/public/wp-content/themes/hennapryor/front-page.php on line 216
( ! ) Error: Call to undefined function igshortcode() in /Users/victoria/Local Sites/beta-sites/app/public/wp-content/themes/hennapryor/front-page.php on line 216
Call Stack

Time Memory Function Location

1 0.0001 406136 {main}( ) …/index.php : 0
2 0.0001 406408 require( ‘/Users/victoria/Local Sites/beta-sites/app/public/wp-blog-header.php’ ) …/index.php : 17
3 0.1058 3538112 require_once( ‘/Users/victoria/Local Sites/beta-sites/app/public/wp-includes/template-loader.php’ ) …/wp-blog-header.php : 19
4 0.1104 3610512 include( ‘/Users/victoria/Local Sites/beta-sites/app/public/wp-content/themes/hennapryor/front-page.php’ ) …/template-loader.php : 106

The function’s custom code I inserted is:

$hennapryor_shortstring = igshortcode(‘shortcode_area’); echo do_shortcode( $hennapryor_shortstring );

9

Hi @vmelchor,
I don’t understand what the igshortcode() function is supposed to do. If you are trying to accomplish the same thing as @beatngu, that first piece of code is what selects the area where your shortcode should output, so it should be ‘get_theme_mod’.
Can you tell me a little more about what you are trying to accomplish?
Cheers,
Bob

10

Hey Rob! Thanks for the reply. Your answer helped me figure out that I had plugged in the variables into the wrong segment of the code. Now that I got it right it’s working just fine.

Thank you again.