Using shortcodes within HTML in Wordpress

Question

I'm trying to create a part to my website http://176.32.230.43/testdigitalmarketingmentor.co.uk/ (at the bottom!)

Where the contact form/information appears inside of the screen of an iPad. I have done this already where a video appears inside the screen of a laptop, but I can't figure out how to change this to my contact form.

So far I have created the contact section as a builder layout part in Themify Builder. This generates the shortcode: [themify_layout_part id=103] to be placed around the website.

I have just put it below the iPad for now. However, how can I implement a shortcode as part of HTML? This is the code and css I have so far for the iPad with video in the screen. Any help would be much appreciated!

#ipad-panel {
    position: relative;
    padding-bottom: 75%;
    padding-left: 64%;
    height: 0;
}

#ipad-panel iframe {
    box-sizing: border-box;
    background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/ipad-750x531.png) center center no-repeat;
    background-size: contain;
    padding: 11.3% 14.8% 11%;
    position: absolute;
    left: 20%;
    width: 60%;
    height: 60%;
}


<div id="ipad-panel">
    <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Ram Segev · Accepted Answer · 2016-07-18 12:22:47Z

3

You need to find the php template file with this HTML area and implement the short code there, you can use this plugin what the file to easily find out which file is it.

after you have found the template file insert <?php echo do_shortcode('[themify_layout_part id=103]'); ?>

answered Jul 18, 2016 at 12:22

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Becky CP Over a year ago

Hi, where do I insert that code in the file? I don't have much/any experience with php.

Ram Segev Over a year ago

Add it between the divs <div id="ipad-panel"> <?php echo do_shortcode('[themify_layout_part id=103]'); ?> </div>

Becky CP Over a year ago

This still doesn't seem to work? I'm not sure if I'm doing it right. I've just put that code into the bottom of my page.php file but it just shows the iPad image (with no contact info etc) at the very bottom of my site.

Toma Tomov Over a year ago

Why is this answer not accepted as right? Finally someone show us how to do it ... I google it 10 times only some useless tutorials.

R.K.Bhardwaj · Accepted Answer · 2016-07-18 12:35:37Z

2

if you are going to use code in WordPress dashboard then you need to put it just [themify_layout_part id=103]

if you are going to use in files like template.php then you need to make your shortcode to hard code

now create a template for your page and then at the end

<div id="ipad-panel">
    <?php echo do_shortcode('[themify_layout_part id=103]'); ?>
</div>

OR go to your page builder and add a section with HTML section and put the code [themify_layout_part id=103]

hope you understand

answered Jul 18, 2016 at 12:35

R.K.Bhardwaj

2,1901 gold badge16 silver badges27 bronze badges

2 Comments

Becky CP Over a year ago

That piece of code doesn't seem to work. Do I need to put the <?php code anywhere else?

R.K.Bhardwaj Over a year ago

what is your file extension name ? like .php .html etc

orchid green · Accepted Answer · 2022-09-12 05:42:52Z

2

If you use Elementor plugin in WordPress. And you also want to add a short code manually, ,you can paste the code below anywhere you want!

<section>[YOUR SHORTCODE]</section>

I hope I was able to help

edited Sep 12, 2022 at 5:42

answered Sep 12, 2022 at 5:41

orchid green

212 bronze badges

Comments

Zubex · Accepted Answer · 2016-07-18 12:23:42Z

1

I don't really understand the question. What's stopping you from doing this?

<div id="ipad-panel">
    [themify_layout_part id=103]
</div>

answered Jul 18, 2016 at 12:23

Zubex

192 bronze badges

1 Comment

Becky CP Over a year ago

I don't think Wordpress allows you to do that, it doesn't seem to work.

ristapk · Accepted Answer · 2016-07-18 11:58:45Z

0

You cannot paste WordPress shortcode in HTML directly. To generate HTML of shortcode, you need to pase it into WordPress page or post, get HTML of it, and than copy just that HTML (inspect element in your browser).

answered Jul 18, 2016 at 11:58

ristapk

1,3723 gold badges15 silver badges27 bronze badges

6 Comments

Becky CP Over a year ago

I've put the shortcode onto this page, 176.32.230.43/testdigitalmarketingmentor.co.uk/?page_id=104 and have tried taking some code from it to insert however it doesn't seem to work. I'm not sure which part of the code I need and how to implement it?

ristapk Over a year ago

did you open page editor like this one here codex.wordpress.org/images/thumb/2/26/writepage.png/… ?

Becky CP Over a year ago

No I used "inspect element" on the page I linked in my first comment. Is this not what I am supposed to do?

ristapk Over a year ago

No, it's not. You cannot paste code into "inspect element". You should do that in wp-admin, admin dashboard of WordPress.

Becky CP Over a year ago

Oh, no thats not what I meant. I'm not sure what to take from inspect element. I know to put it into the admin dashboard.

|

Collectives™ on Stack Overflow

Using shortcodes within HTML in Wordpress

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related