WordPress.org

Forums

Radio Station
[resolved] How to get the widget to auto refresh (7 posts)

  1. Dear_Maria
    Member
    Posted 1 year ago #

    Hi everyone,

    I thought I would share this little tweak I have made. Basically I found it a little annoying that to see the current DJ and whose on next change to the next one, you have to refresh the page. This isn't great for me as I have a chat room and a full page refresh kicks everyone out of it. I have managed to solve this issues by editing my sites theme. Now my sidebar with the radio station widgets refresh every 30 seconds and my page doesn't. YAY.

    I did this using a div function.

    here's how I did it.

    1) Make a back up of your theme. I'm just starting to learn how to build website so I don't want to steer you in the wrong direction and you can't fix it

    2) next we are going div tag the content we want to refresh. so from your theme we are going to edit the relevant side bar file (this depend on which sidebar you have your widgets in e.g sidebar, sidebar-footer-1, you should be able to tell which one you have the widget in by checking the the widget area in your wp dashboard. I was using the regular sidebar.php - this is what mine looked like

    <?php
    /**
     * The Sidebar containing the main widget areas.
     *
     * @package Something-Fishy
     * @since Something Fishy1.0
     */
    ?>
    		<div id="secondary" class="widget-area" role="complementary">
    			<?php do_action( 'before_sidebar' ); ?>
    			<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
    
    				<aside id="search" class="widget widget_search">
    					<?php get_search_form(); ?>
    				</aside>
    
    				<aside id="archives" class="widget">
    					<h1 class="widget-title"><?php _e( 'Archives', 'something-fishy' ); ?></h1>
    					<ul>
    						<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
    					</ul>
    				</aside>
    
    				<aside id="meta" class="widget">
    					<h1 class="widget-title"><?php _e( 'Meta', 'something-fishy' ); ?></h1>
    					<ul>
    						<?php wp_register(); ?>
    						<li><?php wp_loginout(); ?></li>
    						<?php wp_meta(); ?>
    					</ul>
    				</aside>
    
    			<?php endif; // end sidebar widget area ?>
    		</div><!-- #secondary .widget-area -->

    To tag the area I added the following

    <div id="djnow"> and </div>' (djnow is just the title of my div, you can change it to whatever you want)

    once added your code should look like this

    <?php
    /**
     * The Sidebar containing the main widget areas.
     *
     * @package Something-Fishy
     * @since Something Fishy1.0
     */
    
     ?>
        <div id="djnow">
             <div id="secondary" class="widget-area" role="complementary">
    			<?php do_action( 'before_sidebar' ); ?>
    			<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
    
    				<aside id="search" class="widget widget_search">
    					<?php get_search_form(); ?>
    				</aside>
    
    				<aside id="archives" class="widget">
    					<h1 class="widget-title"><?php _e( 'Archives', 'something-fishy' ); ?></h1>
    					<ul>
    						<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
    					</ul>
    				</aside>
    
    				<aside id="meta" class="widget">
    					<h1 class="widget-title"><?php _e( 'Meta', 'something-fishy' ); ?></h1>
    					<ul>
    						<?php wp_register(); ?>
    						<li><?php wp_loginout(); ?></li>
    						<?php wp_meta(); ?>
    					</ul>
    				</aside>
    
    			<?php endif; // end sidebar widget area ?>
    		</div><!-- #secondary .widget-area -->
    	</div>

    Save the file.

    Next we are going to edit the header.php file. This will make the sidebar refresh. After the Nav functions (after </nav>) I added the following code `<script type="text/javascript">
    function WidgetRefresh() {
    $("#djnow").load(location.href+" #djnow>*","");
    }
    setInterval(function() {
    WidgetRefresh();
    }, 30000);
    </script>`

    It should end up looking like something like this

    php _e( 'Skip to content', 'something-fishy' ); ?></a></div>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    		</nav>
    <script type="text/javascript">
    			function WidgetRefresh() {
    			$("#djnow").load(location.href+" #djnow>*","");
    			}
    			setInterval(function() {
    			WidgetRefresh();
    			}, 30000);
    			</script>
    <!-- include the latest version of jQuery-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    	</header><!-- #masthead .site-header -->
    	<div id="main">

    and now my widget refreshes every 30 seconds. You can change how quickly it refreshes by changing the }, 30000);

    hope this helps

    https://wordpress.org/plugins/radio-station/

  2. Dear_Maria
    Member
    Posted 1 year ago #

    I'll mark this as resolved so people can tell it a solution, not just a question

  3. Nikki Blight
    Member
    Plugin Author

    Posted 1 year ago #

    Cool mod. When I get some spare time, I'll look into incorporating this into the plugin itself. :)

  4. biggee71
    Member
    Posted 1 year ago #

    This is a great little bit of code Maria!

    I've included a wrapped version below for anybody using recent versions of wordpress as the bundled jQuery is now set to compatibility mode by default and the code above won't work as it is.

    So if you tried Maria's code and it didn't work, the chances are that you are running in compatibility mode and will need to use this instead :

    <script type="text/javascript">(function($) {function WidgetRefresh() {$("#djnow").load(location.href+" #djnow>*","");}setInterval(function() {WidgetRefresh();}, 30000);})( jQuery );</script>

  5. Vijayakumar
    Member
    Posted 11 months ago #

    I think wp auto reload widgets plugin do this, this is such a great plugin
    https://wordpress.org/plugins/wp-auto-reload-widgets/

  6. sw0277
    Member
    Posted 7 months ago #

    This works great! Could someone please explain to me how I could make it so if there is no user activity lets say for 5 minutes, then it would auto refresh? I tried playing around with this:

    var time = new Date().getTime();

    var refreshTime = 20*1000;

    $(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {

    time = new Date().getTime();

    });

    I'm not having any luck, if someone could help me out it would be greatly appreciated.

  7. sw0277
    Member
    Posted 7 months ago #

    <script>
    
    	var time = new Date().getTime();
    
    	var refreshTime = 20*1000;
    
    	$(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {
    
    	time = new Date().getTime(); 
    
    	});
    
    	function refresh()
    
    	{
    
    		 if(new Date().getTime() - time >= refreshTime)
    
    	$('#feed1').load(location.href="/dashboard").fadeIn("slow");
    
    		 else
    
    	setTimeout(refresh, refreshTime);
    
    }
    
    	setTimeout(refresh, refreshTime);
    
    </script>

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Radio Station
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.