PHP mixed with some JS code to update WordPress theme settings

1 Views

I am working on my first WordPress Theme but I am facing a little problem in my code.

In fact, I have created a little page in the administration to change some settings on my theme and, for example, to modify the background images of the theme which are displayed in a slideshow jQuery plugin called "Vegas". All works well but I think that I don’t really use a good method to implement my code.

Read More

In the header.php file, I have written this : 

        <?php
        if(get_theme_option("bg_slideshow") == 1):
        ?>
        /* Background Images */
        var bg_slideshow = jQuery(".bg_slideshow").attr("data-active");
        if(bg_slideshow == 1) {
            jQuery.vegas('slideshow', {
                delay: 8000,
                backgrounds:[
                    <?php echo get_bg_images_url(); ?>
                ]
            })('overlay');
        }
        <?php
        endif;
        ?>

As you can see, I have some PHP and some JS code mixed here… So I get the theme option with a PHP function and I updated my JS code like that. Can anyone help me to improve my code or can anyone tell me how I need to work (or to separate the code) in order to have something good ?

Post Views: 1

Related posts

1 comment

  1. The way I see, you could minimize code mixing storing the return value of get_theme_option("bg_slideshow") into a JS variable, although it would not solve the problem as whole:

    var themeOptBgSlideshow = <?php echo get_theme_option("bg_slideshow"); ?>;

if(themeOptBgSlideshow == 1){
    /* Background Images */
    var bg_slideshow = jQuery(".bg_slideshow").attr("data-active");
    if(bg_slideshow == 1) {
        jQuery.vegas('slideshow', {
            delay: 8000,
            backgrounds:[
                <?php echo get_bg_images_url(); ?>
            ]
        })('overlay');
    }
}

    But as said, that workoaround would only minimize code mixing. If you’re really into separating your code (which is always a good practice), I think the only option is to make an AJAX call. This way, your JS can request a PHP page/function that would only return the value of get_theme_option("bg_slideshow"). Assign the returned value to any variable as proposed in the example above and you’re ready to go.

    IMHO, I think an AJAX call for that is a bit of an extreme solution. But anyways, that’s up to you to decide which solution fits you best.

Comments are closed.