1

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.

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 ?

0

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.

  • 1
    I end up making ajax calls for this sort of thing to avoid mixing php and js usually. But one thing to keep in mind is the inherent slowness of WordPress ajax requests (because it has to load the whole framework) means you're probably looking at 2-3 seconds for a response. – Andrew Bartel Dec 10 '13 at 16:20
  • Yeah @AndrewBartel, that's a point to consider. Maybe in this case to have a mixed code isn't that bad after all. – mathielo Dec 10 '13 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.