wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Setting Autoplay Twenty Fourteen Slider

WordPress themes

Setting Autoplay Twenty Fourteen Slider

Last updated on May 12, 2017
Posted on February 9, 2014

As mentioned in my previous post, how to display featured content in Twenty Fourteen theme, that there is a layout’s option, called “Grid” and “Slider”.

By default, when you set the layout from “Dashboard”, “Appearance”, “Customize”, “Featured Content” and setting from “Grid” to “Slider” will make a nice slider section on your homepage.

How to Remove Twenty Fourteen Author Name or Link

Layout options, Grid or Slider.
Layout options, Grid or Slider.

This slider will have two arrow buttons that will play the slider itself when the arrow button is clicked.

Default Twenty Fourteen slider
Default Twenty Fourteen slider

If you’re happy with this then you can stop right here, but, if you want to set autoplay the slider, which means, whenever people load your websites homepage, the slider will be sliding alone from one featured post image to another.

To do this, we will need our custom javascript, and adding the php code to function.php of our child theme, click here if you need to create Twenty Fourteen child theme. Please backup your functions.php first. Additional link in case you have functions.php error, don’t panic! 😀

I have zero knowledge of Javascript, so I spent loooong time to find this useful javascript tutorial for setting autoplay.

Steps to set autoplay the slider

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

1. Access your child theme folder mine, called, “twentyfourteenchild” with FTP client or cPanel directly.

Inside child theme folder hierarchy
Inside child theme folder

2. Inside this folder, create a new folder, called, “js”, and inside js folder, create a javascript file, I call it, myautosliding.js like in hierarchy inside child theme folder in the screenshot above.

3. Inside myautosliding.js, add this following code:

jQuery(document).ready(function ($){

	var timeOut = null;
	var slidingPeriod = 7000; //change the 7000 to any number you like, 7000 means 7 seconds

	$('.featured-content .post-thumbnail img').mouseover(function(e,simulated){

		//what happen if you hover your mouse

		if(!simulated){

			clearTimeout(timeOut);

		//if you don't hover anymore
		}
	}).mouseout(function(e,simulated){
		timeOut = setTimeout(autoAdvance, slidingPeriod);
	});

	// An autoslide function

	function autoAdvance (){

		// Simulated by a click on the next arrow.
		$('#featured-content .slider-next').trigger('click',[true]);

		// Setting delay in 7 seconds, as explained above
		timeOut = setTimeout(autoAdvance, slidingPeriod);
	}

	autoAdvance();

});
This is how myautosliding.js looks like, change the 7000 to any preferred number
This is how myautosliding.js looks like, change the 7000 to any preferred number

Change the number (7000) to any number you like, 7000 means 7 seconds, because in javascript, it reads only milliseconds.

Also, when people hover their mouses on the featured content featured image, the slider will be paused.

4. Inside functions.php (from child theme) add this following code:

Note, if you have another code inside your functions.php, you can add it below <?php line
<?php
function my_autosliding_tf_child() {
	if (!is_admin()) {
	if (is_front_page()) {
	wp_enqueue_script( 'my_Autosliding', get_stylesheet_directory_uri() . '/js/myautosliding.js', '', '1.0', true );
	}
	}
}

add_action('wp_enqueue_scripts', 'my_autosliding_tf_child');

?>

 

Autoplay Twenty Fourteen slider functions
Autoplay Twenty Fourteen slider functions.php

The code basically means that when we login to admin page, the javascript won’t be loaded, and it’s only loaded when we visit homepage only (where the Slider is located).

This might help to not adding resources loaded when site loading speed becomes an attention.

So that’s how I set autoplay with Twenty Fourteen slider feature.

customize functions slider twenty fourteen twentyfourteen

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Adding Logo to Twenty Fourteen on The Top Left
→ Proudly Powered By WordPress Twenty Fourteen

Comments

  1. sienna says

    October 25, 2014 at 3:41 pm

    How to make the twentyfourteen slider work?
    I dont know how to use it.
    Please explain how I could add 5 images to create a slider.

    Thank you

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept