I want to add a flex slider to a WordPress Child theme but it does not work. I have been trying for hours and would appreciate some help.
Here is the site:
http://dev.electricalenergy.se/
In my Child Theme, I have added:
1. a CSS folder with flexslider.css
2. a js folder with jquery.flexslider.js
3. function.php with the following script
<?php
// FLEXSLIDER
function flexslider() {
if (!is_admin()) {
// Enqueue FlexSlider JavaScript
wp_register_script('jquery_flexslider', get_template_directory_uri(). '/js/jquery.flexslider-min.js', array('jquery') );
wp_enqueue_script('jquery_flexslider');
// Enqueue FlexSlider Stylesheet
wp_register_style( 'flexslider-style', get_template_directory_uri() . '/css/flexslider.css', 'all' );
wp_enqueue_style( 'flexslider-style' );
// FlexSlider custom settings
add_action('wp_footer', 'flexslider_settings');
function flexslider_settings() { ?>
<script>
jQuery(document).ready(function($){
$('.flexslider').flexslider();
});
</script>
<?php
}
}
}
add_action('init', 'flexslider');
-
at last, I duplicated index.php from the parent Theme and added
<div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <!-- Flexslider demo content --> <div class="flexslider"> <ul class="slides"> <li> <img src="http://farm7.staticflickr.com/6213/6256961398_a484813abe_b.jpg" /> <p class="flex-caption">Caption goes here</p> </li> <li> <img src="http://farm7.staticflickr.com/6025/6012928351_d643e5a404_b.jpg" /> <p class="flex-caption">Caption goes here</p> </li> <li> <img src="http://farm7.staticflickr.com/6126/6007110789_bd7faaaa79_b.jpg" /> <p class="flex-caption">Caption goes here</p> </li> <li> <img src="http://farm6.staticflickr.com/5159/5874760659_de4c00d585_b.jpg" /> <p class="flex-caption">Caption goes here</p> </li> </ul> </div> <!-- END Flexslider demo content -->
You code is correct, but the css is empty and the js is not loaded:
404
“NetworkError: 404 Not Found – http://dev.electricalenergy.se/wp-content/themes/twentysixteen/js/jquery.flexslider-min.js?ver=4.5“
“NetworkError: 404 Not Found – http://dev.electricalenergy.se/wp-content/themes/twentysixteen/css/flexslider.css?ver=4.5“
Put the css/js files of flexslider in your parent theme directory or follow this.