1./3. Both ar related problems. Since you don’t have any featured images selected for slider, slider is not working properly and it goes above menu. Once you will add images both of your problems will be solved. Here is how you can use featured images in WordPress. Recommended image sizes for this theme can be found on theme documentation.
- To add slider on all pages you will have to edit template files as there is no options for that by default. Open
functions.php file and replace these lines of code:
// Add slider CSS only if is front page and slider is enabled
if( ( is_home() || is_front_page() ) && of_get_option('sparkling_slider_checkbox') == 1 ) {
wp_enqueue_style( 'flexslider-css', get_template_directory_uri().'/inc/css/flexslider.css' );
}
if( ( is_home() || is_front_page() ) && of_get_option('sparkling_slider_checkbox') == 1 ) {
wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/inc/js/flexslider.min.js', array('jquery'), '20140222', true );
}
// Flexslider customization
if( ( is_home() || is_front_page() ) && of_get_option('sparkling_slider_checkbox') == 1 ) {
wp_enqueue_script( 'flexslider-customization', get_template_directory_uri() . '/inc/js/flexslider-custom.js', array('jquery', 'flexslider-js'), '20140716', true );
}
Keep in mind that these lines are not together on that file.
And replace those lines with these:
// Add slider CSS only if is front page ans slider is enabled
wp_enqueue_style( 'flexslider-css', get_template_directory_uri().'/inc/css/flexslider.css' );
// Flexlider library
wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/inc/js/flexslider.min.js', array('jquery'), '20140222', true );
// Flexslider customization
wp_enqueue_script( 'flexslider-customization', get_template_directory_uri() . '/inc/js/flexslider-custom.js', array('jquery', 'flexslider-js'), '20140716', true );
Now you will have slider related CSS and JavaScript printed on all pages which is just part of the process. You will still have to modify slider code itself and here is how you can get it done.
Open file called extras.php that you can find inside sparkling theme folder >> inc. This file can’t be accessed via WordPress dashboard and you should do it via FTP or via your hosting account.
On that file find function called sparkling_featured_slider and replace all function with this code:
if ( ! function_exists( 'sparkling_featured_slider' ) ) :
/**
* Featured image slider, displayed on front page for static page and blog
*/
function sparkling_featured_slider() {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li><a href="'. get_permalink() .'">';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
endwhile;
endif;
echo '</a></li>';
echo '</ul>';
echo ' </div>';
}
endif;
It looks the same but this code is two lines shorter.
Now you should have slider on all pages.
Let me know if this helps.