Here's where I'm at. Have inserted this into a page's html code:
<div id="stgSlideshow">
<div>
<img src=".jpg">
</div>
<div>
<img src=".jpg">
</div>
<div>
Test text here...
</div>
</div>
Have added the CSS below via Customise>Additional CSS:
/* SLIDER */
#stgSlideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#stgSlideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Lastly, I have updated my Header.php file to include some javascript to rotate the slides:
<?php
/**
* The header.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=";>
<link rel="stylesheet" href=";>
<link rel="stylesheet" href=" Sans">
<script>
$(function() {
$("#stgSlideshow > div:gt(0)").hide();
setInterval(function() {
$('#stgSlideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#stgSlideshow');
}, 3000);
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>
<?php get_template_part( 'template-parts/header/site-header' ); ?>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
Sadly, not working. Any ideas?
Here's where I'm at. Have inserted this into a page's html code:
<div id="stgSlideshow">
<div>
<img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/AdjustedA2600-scaled.jpg">
</div>
<div>
<img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/cropped-Zen-Gardens-Gallery-1-scaled-1.jpg">
</div>
<div>
Test text here...
</div>
</div>
Have added the CSS below via Customise>Additional CSS:
/* SLIDER */
#stgSlideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#stgSlideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Lastly, I have updated my Header.php file to include some javascript to rotate the slides:
<?php
/**
* The header.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis/css?family=Dosis">
<link rel="stylesheet" href="https://fonts.googleapis/css?family=Open Sans">
<script>
$(function() {
$("#stgSlideshow > div:gt(0)").hide();
setInterval(function() {
$('#stgSlideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#stgSlideshow');
}, 3000);
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>
<?php get_template_part( 'template-parts/header/site-header' ); ?>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
Sadly, not working. Any ideas?
Share Improve this question asked Mar 6, 2021 at 17:37 stigzlerstigzler 1034 bronze badges1 Answer
Reset to default 2First off, you shouldn't insert <script> tags into WordPress's template files. The proper way to add Javascript code is to use wp_enqueue_script().
If I'm reading this right, it appears you're using jQuery code, so you'll need to ensure that jquery is in the $deps array in your wp_enqueue_script() call.
Also, WordPress uses jQuery in noConflict mode, which means you need to either a) do a bit of extra work to ensure that $ is available, or b) replace $ with jQuery in your code.
Sample code
You can add this to your active theme's functions.php file.
functions.php
add_action( 'wp_enqueue_scripts', 'wpse384608_slider_script' );
function wpse384608_slider_script() {
wp_enqueue_script(
'my-slider',
get_stylesheet_directory_uri() . '/js/slider-script.js',
array( 'jquery' ),
'1.0.0',
true
);
}
The last parameter in the wp_enqueue_script() call, the true, tells WordPress to load the script in the page's footer. If you need it loaded in the header, change this to false.
You'll need to move the JS code in your question to a file in your theme, at {theme root}/js/slider-script.js.
js/slider-script.js
jQuery(function() {
jQuery("#stgSlideshow > div:gt(0)").hide();
setInterval(function() {
jQuery('#stgSlideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#stgSlideshow');
}, 3000);
});