Javascript from PHP (wordpress)

Question

I created a new WordPress theme. When I moved it into an IIS webserver it fails.

Here's my code:

<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
    <?php
        if(get_the_title() == 'Home'){
        $page = get_page_by_title( get_the_title());
        $Pagecontent = apply_filters('the_content', $page->post_content); 
        $ContentArray = explode(";",$Pagecontent);
        echo $ContentArray[count($ContentArray) -1];    
        <script type="text/javascript">
            var info = <?php echo json_encode($ContentArray) ?>;
            document.getElementById('infoTxt').innerHTML = info[1];
            setInterval(function()
            {
                var i = Math.round((Math.random()) * info.length);
                if (i == info.length) --i;
                   document.getElementById('infoTxt').innerHTML = info[i];
            }, 5 * 1000); 
            </script>               
<?php
    }
    else{
        $page = get_page_by_title( get_the_title());
        $content = apply_filters('the_content',            $page->post_content); 
            $InfoboxStr = substr($content, 0, strpos($content, '@:'));
        echo $InfoboxStr;       
    }

?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
    <li><a href="www.google.dk"><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></a></li>
    <li><a href="www.google.dk"><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></a></li>
    <li><a href="www.google.dk"><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></a></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>

It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;

When I ex. tried to

Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"

I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem

Mr Lister · Accepted Answer · 2016-10-04 15:33:36Z

1

If you want to use the <Script> tag, you need to close the php tag, in here:

echo $ContentArray[count($ContentArray) -1];    
        <script type="text/javascript">

So it should look like that:

?>
<script>
[..]
</script>
<?php

The best practice it that you should place the JS either in at the top or bottom of your file or in another file.

edited Oct 4, 2016 at 15:33

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Sep 25, 2016 at 17:43

Marcin

1,4921 gold badge14 silver badges27 bronze badges

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

1 Comment

Sander Over a year ago

Thanks, I didn't think of closing the PHP tag inside of the IF loop

Poiz · Accepted Answer · 2016-09-25 17:43:58Z

The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.

Here you go with something that might assist:::

<?php get_header(); ?>
    <h2><?php the_title();?></h2>
    <div class="infoBox" id="infoTxt">
        <?php
            if(get_the_title() == 'Home'){
                $page           = get_page_by_title( get_the_title());
                $Pagecontent    = apply_filters('the_content', $page->post_content);
                $ContentArray   = explode(";",$Pagecontent);
                echo $ContentArray[count($ContentArray) -1]; 
        ?>

        <script type="text/javascript">
            var info    = <?php echo json_encode($ContentArray) ?>;
            document.getElementById('infoTxt').innerHTML = info[1];
            setInterval(function() {
                var i = Math.round((Math.random()) * info.length);
                if (i == info.length){ --i;  } 
                document.getElementById('infoTxt').innerHTML = info[i];
                }, 5 * 1000);
        </script>
        <?php
        }else{
            $page = get_page_by_title( get_the_title());
            $content = apply_filters('the_content',            $page->post_content);
            $InfoboxStr = substr($content, 0, strpos($content, '@:'));
            echo $InfoboxStr;
        }   
        ?>
        </div><!--End InfoTxt-->
        <div id="Flagbox">
            <ul style="list-style-type:none;">
            <li><a href="www.google.dk"><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></a></li>
        <li><a href="www.google.dk"><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></a></li>
        <li><a href="www.google.dk"><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></a></li>
        </ul>
        </div> <!-- end Flag Box-->
        <div style="margin-bottom:25%;">
            </div>
    <?php get_footer(); ?>

Thanks ! You are right, I didn't think that I could close the <?php tag inside the IF. You just made my night

Collectives™ on Stack Overflow

Javascript from PHP (wordpress)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related