WordPress.org

Forums

Portfolio Slideshow
[resolved] Broken theme due to "Output the javascript & css for the head (6 posts)

  1. bretta
    Member
    Posted 4 years ago #

    Hi. Thanks for your great plugin.

    I'm trying to get Portfolio Slideshow to work in the following custom theme...

    http://www.frogsthemes.com/wordpress-portfolio-themes/foliogrid/

    ...however, simply by activating your plugin this breaks the home page of the theme (all the formatting goes awry). Posts seem to be fine though. If I insert the plugin into a post it all works as it should, but of course the home page is still broken (regardless whether or not the shortcode is in any posts or not)

    I've traced the 'problem' (or perhaps fix?) to the following lines of code within portfolio_slideshow.php:

    // Output the javascript & css for the header here

    if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"),

    false, '1.4.2', false);
    wp_enqueue_script('jquery');
    }

    If I remove this section from portfolio_slideshow.php, the home page is no longer broken, and the plugin also still works. As far as I can tell everything is still OK but I'm a relative newbie to WP and certainly no coder. What damage am I doing by removing this section?

    I imagine the actual problem is not with your plugin but with the custom theme I'm using so is there anything I can do to address this at that end?

    Cheers - Brett

  2. Dalton Rooney
    Member
    Plugin Contributor

    Posted 4 years ago #

    Hi Brett,
    The problem you're seeing happens when two copies of jQuery are loaded simultaneously. The problem is that your theme developer hard-coded the jQuery script into the header instead of using the enqueue function, as I did.

    The short-term fix is exactly as you've done, which is to modify the plugin so it doesn't load jQuery any more. You'll get into trouble if you try to load another plugin which requires jQuery, though... and a lot of them do. My recommendation is to modify the theme to load jQuery properly, or communicate with the theme developer to do it for you. Basically, if you edit out the line in your header that links to jQuery and copy that bit of PHP script above into your functions.php, you should be good to go.

    Dalton

  3. bretta
    Member
    Posted 4 years ago #

    Thanks so much Dalton for your reply.

    I've tried as you've suggested but my skills level is such that I'm probably misunderstanding you. How's this...

    The code I'm removing from the Header.php is:
    <!-- Javascript -->
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jfade.1.0.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js"></script>
    <meta name="google-site-verification" content="WQPUp91kHwr6mA551-SZk_Mi1RXDDOheN5heNGd_S5U" />

    is this correct?

    Then, I'm copying the following into function.php:
    if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2', false);
    wp_enqueue_script('jquery');
    }

    However, where do I place it? Does it have to be bounded by <?php and ?> ? The following code is all that's in the function.php file:
    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar();
    ?>
    <?php add_theme_support( 'post-thumbnails' ); ?>

    Finally, Do put back the bit of php script that I removed into your portfolio_slideshow.php file?

    Sorry for the questions! I've also asked the developer, but given that they're developing a PRO version of the theme which includes support, I'm not hopeful.

    Cheers - Brett

  4. Dalton Rooney
    Member
    Plugin Contributor

    Posted 4 years ago #

    Hi Brett,
    I think the best way to do it is to just comment out the jQuery script in your header.php like so:

    <!-- Javascript -->
    <!--<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>-->
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jfade.1.0.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js"></script>
    <meta name="google-site-verification" content="WQPUp91kHwr6mA551-SZk_Mi1RXDDOheN5heNGd_S5U" />

    (Note the <!-- --> that surrounds that line now)
    You want to leave the other javascript components as they are required for your theme, and are less commonly encountered in plugins.

    The contents of your functions.php would be like this:

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar();
    
    add_theme_support( 'post-thumbnails' );
    
    if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2', false);
    wp_enqueue_script('jquery');
    } ?>

    Make sure there is no empty space at the end of the file before you save it.

    Finally, yes, you should also restore the code in the Portfolio Slideshow plugin, but it's not absolutely necessary as long as it's working. The next time you update the plugin it should be back to normal.

    Dalton

  5. Dalton Rooney
    Member
    Plugin Contributor

    Posted 4 years ago #

    PS: I just realized one more potential problem, which is that jQuery needs to be loaded before the other plugins specified in the theme header. If you make these changes and it doesn't work, try moving the line that looks like

    <?php wp_head(); ?> above the other scripts, or alternately, move the other scripts down just below wp_head(); like this:

    <?php wp_head(); ?>
    <!-- Javascript -->
    <!--<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>-->
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jfade.1.0.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js"></script>
    <meta name="google-site-verification" content="WQPUp91kHwr6mA551-SZk_Mi1RXDDOheN5heNGd_S5U" />
  6. bretta
    Member
    Posted 4 years ago #

    That did it! So far so good. That's fantastic Dalton. Thanks so much for your help. Incidentally, the comment I posted on the Theme developers site alerting them to this issue was removed. Guess they don't want people to know!

    Brett

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Portfolio Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic