how to add Wordpress phpshortcode into HTML page or custom template?

Question

I need to call a wordpress plugin shortcode to a different html page, this html page is not in wordpress pages or posts.

I want to add the phpshortcode [<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>] of search bar as a fixed header in my template

-i tried By Adding the php code to call in Html Page Below .

It does nothing, no output of any sort. So how can I call wordpress plugin functions and their shortcodes to a html page file.

Thanks

---Html Template Below----

Project 1

https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>

    <script type="text/javascript">
        var currentIndex = 0;
        var currentId = "camera";
        var dragStarted = false;
        $(document).ready(function() {
            $(document).on("menuready",function(event){
                $("html,body").css("background","#1abc9c");
                console.log(event);
            });

            $(document).on("menudrag",function(event){
                if(!dragStarted){
                    dragStarted = true;
                    $("#overlay").show();
                    $("#overlay").transition({
                        opacity : 1
                    },300);
                }
            });

            $(document).on("menudragend",function(event){

                var curr = eval("colors."+currentId);
                $("#overlay").transition({
                    opacity : 0
                },300,function(){
                    $("#overlay").hide();
                    dragStarted = false;
                });
                setTimeout(function(){
                    $(".ferromenu-controller,#nav li a").css("color",curr.background);
                },250);
            });

            $("#nav").ferroMenu({
                position    : "left-center",
                delay       : 50,
                rotation    : 720,
                margin      : 20,
                opened      : true
            });


        });

        var colors = {
                "camera" : {
                    "background" : "#1abc9c",
                    "index" : 0
                },
                "user" : {
                    "background" : "#f39c12",
                    "index" : 1
                },
                "mapmarker" : {
                    "background" : "#e67e22",
                    "index" : 2
                },
                "music" : {
                    "background" : "#8e44ad",
                    "index" : 3
                },
                "commentalt" : {
                    "background" : "#34495e",
                    "index" : 4
                },
                "moon" : {
                    "background" : "#3498db",
                    "index" : 5
                }

        };

        function goTo(id){
            var obj = eval("colors."+id);

            $("body").css("background",obj.background);
            $(".ferromenu-controller,#nav li a").css("color",obj.background);
            if(obj.index > currentIndex){
                $(".active").addClass("off");
                $(".active").transition({
                    scale : 0.1,
                    opacity : 0,
                    zIndex : 0
                },600);

                $("#"+currentId).removeClass("active");

                $("#"+id).addClass("active");
                $("section").addClass("hideScroll");
                $("#"+id).transition({
                    scale   : 3,
                    y       : 0
                },0,function(){
                    $("#"+id).removeClass("off");
                    $("#"+id).transition({
                        scale : 1,
                        opacity : 1,
                        zIndex : 2
                    },600,function(){
                        $("section").removeClass("hideScroll");
                    });
                });
            }else if(obj.index < currentIndex){
                var oldElement = $(".active");
                $(".active").addClass("off");
                $(".active").transition({
                    scale : 3,
                    opacity : 0,
                    zIndex : 0
                },600);
                $("#"+currentId).removeClass("active");


                $("#"+id).addClass("active");
                $("section").addClass("hideScroll");

                $("#"+id).transition({
                    scale : 0.1,
                    y : 0
                },0,function(){
                    $("#"+id).removeClass("off");
                    $("#"+id).transition({
                        scale : 1,
                        opacity : 1,
                        zIndex : 2
                    },600,function(){
                        $(oldElement).transition({
                            y : -2000
                        },100,function(){
                            $("section").removeClass("hideScroll"); 
                        });

                    });
                });
            }
            currentIndex = obj.index;
            currentId = id;

        }
    </script>
</head>
<body>
    <ul id="nav">
        <li><a href="javascript:goTo('camera');"><i class="icon-camera"></i></a></li>
        <li><a href="javascript:goTo('user');"><i class="icon-user"></i></a></li>
        <li><a href="javascript:goTo('mapmarker');"><i class="icon-map-marker"></i></a></li>
        <li><a href="javascript:goTo('music');"><i class="icon-music"></i></a></li>
        <li><a href="javascript:goTo('commentalt');"><i class="icon-comment-alt"></i></a></li>
        <li><a href="javascript:goTo('moon');"><i class="icon-moon"></i></a></li>
    </ul>
    <section id="content">
        <div id="overlay"></div>
        <article id="camera" class="active">
            <i class="icon-camera"></i>
            <h1>Camera</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="user" class="off">
            <i class="icon-user"></i>
            <h1>User</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="mapmarker" class="off">
            <i class="icon-map-marker"></i>
            <h1>Marker</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="music" class="off">
            <i class="icon-music"></i>
            <h1>Music</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="commentalt" class="off">
            <i class="icon-comment-alt"></i>
            <h1>Comment</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
        <article id="moon" class="off">
            <i class="icon-moon"></i>
            <h1>Moon</h1>
            <div class="cnt">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
                <br/><br/>
                Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
            </div>
        </article>
    </section>
</body>

score 0 · Answer 1 · answered Apr 21 '17 at 07:12

0

You don't want to run the short code. It's really impossible because shortcodes are meant to work with the WordPress CMS. The best thing to do is the following

Import the PHP file that the short code was created. Then use the function rather than the short code for the desired code within the HTML/PHP file you want.

Remember Once you leave the WordPress CMS shortcodes are virtually useless. Good luck.

answered Apr 21 '17 at 07:12

OfficialDtech

59
5

first of all thanks for helping . i dont understand properly How to import the php file in html . if added the html file to the wp-content folder or if i import wp-load.php using this ( – Movie Eater Apr 21 '17 at 07:32

sorrow poetry · Answer 2 · 2017-04-21T09:03:27.387

0

change the file name to .php and do <?php require( '../wp-load.php' ); // if file is in your wp-contents folder then you can call your shirtcode this way <?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?> in your .php file.

and you cant add php in your html, you have to change file extention to .php.

<?php 
require( '../wp-load.php' );
echo do_shortcode('[wpdreams_ajaxsearchlite]');
?>

edited Apr 21 '17 at 09:03

answered Apr 21 '17 at 07:57

sorrow poetry

413
5
11

ok i added these two lines Before HTML tag `` and reaname the file to `.php` , file is now in the wp-content folder and now gettin error **Parse error: syntax error, unexpected '<' in /home4/movier0l/public_html/wp-content/420.php on line 3** here is the [link] (http://movieeater.com/wp-content/420.php) check this and help me out !! Thanks – Movie Eater Apr 21 '17 at 08:50
`` use this i also changed my answer with code to copy @MovieEater – sorrow poetry Apr 21 '17 at 09:01
i my last comment i mentioned that i already rename the file extention to `.php` **Clear me this _you cant add php in your html_ then where to add those php codes** – Movie Eater Apr 21 '17 at 09:11
Thanks alot !! php code is fine now, But Tell me **where to paste the code _so that it beacome _ showed up as a fixed Header** This Is the page where i want to add the fixed search Header [Link](http://movieeater.com/wp-content/420.php) @vahid – Movie Eater Apr 21 '17 at 09:40
after your starting `` tag @MovieEater – sorrow poetry Apr 21 '17 at 11:00
i did the Same now Look[Link](http://movieeater.com/wp-content/420.php) What Happen To template !! How to add It Properly !! if u can do it with teamviewr tell me ? @vahid – Movie Eater Apr 21 '17 at 11:21
you've seen it some where else? i mean with proper placement. – sorrow poetry Apr 21 '17 at 11:29
yes check this[link](https://MovieEater.com) the Red Colour Searchbar is also by using same shortcode – Movie Eater Apr 21 '17 at 11:33

how to add Wordpress phpshortcode into HTML page or custom template?

2 Answers2

Linked