Add a featured slider

This commit is contained in:
Alexander Agnarson 2019-02-03 16:14:59 +01:00
parent 7ae789b005
commit fb0dde9ba1
8 changed files with 218 additions and 2 deletions

26
content-featured.php Normal file
View file

@ -0,0 +1,26 @@
<article id="post-<?php the_ID(); ?>" <?php post_class('group'); ?>>
<div class="post-inner post-hover">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('boxstyle-large'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
<?php endif; ?>
<?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-play"></i></span>'; ?>
<?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-volume-up"></i></span>'; ?>
<?php if ( is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-star"></i></span>'; ?>
</a>
<?php if ( comments_open() && ( get_theme_mod( 'comment-count','on' ) == 'on' ) ): ?>
<a class="post-comments" href="<?php comments_link(); ?>"><span><i class="fa fa-comments-o"></i><?php comments_number( '0', '1', '%' ); ?></span></a>
<?php endif; ?>
<h2 class="post-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
</h2><!--/.post-title-->
</div><!--/.post-thumbnail-->
</div><!--/.post-inner-->
</article><!--/.post-->

View file

@ -485,6 +485,25 @@ if ( ! function_exists( 'boxstyle_post_images' ) ) {
} }
/* Get featured post ids
/* ------------------------------------ */
if ( ! function_exists( 'boxstyle_get_featured_post_ids' ) ) {
function boxstyle_get_featured_post_ids() {
$args = array(
'category' => absint( get_theme_mod('featured-category','') ),
'numberposts' => absint( get_theme_mod('featured-posts-count','3')),
);
$posts = get_posts($args);
if ( !$posts ) return false;
foreach ( $posts as $post )
$ids[] = $post->ID;
return $ids;
}
}
/* ------------------------------------------------------------------------- * /* ------------------------------------------------------------------------- *
* Filters * Filters
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
@ -580,6 +599,29 @@ add_filter( 'video_embed_html', 'boxstyle_embed_html_jp' );
* Actions * Actions
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
/* Include or exclude featured articles in loop
/* ------------------------------------ */
if ( ! function_exists( 'boxstyle_pre_get_posts' ) ) {
function boxstyle_pre_get_posts( $query ) {
// Are we on main query ?
if ( !$query->is_main_query() ) return;
if ( $query->is_home() ) {
// Featured posts enabled
if ( get_theme_mod('featured-posts-count','3') != '0' ) {
// Get featured post ids
$featured_post_ids = boxstyle_get_featured_post_ids();
// Exclude posts
if ( $featured_post_ids && !get_theme_mod('featured-posts-include') )
$query->set('post__not_in', $featured_post_ids);
}
}
}
}
add_action( 'pre_get_posts', 'boxstyle_pre_get_posts' );
/* Script for no-js / js class /* Script for no-js / js class
/* ------------------------------------ */ /* ------------------------------------ */
if ( ! function_exists( 'boxstyle_html_js_class' ) ) { if ( ! function_exists( 'boxstyle_html_js_class' ) ) {
@ -679,6 +721,47 @@ add_action('woocommerce_after_main_content', 'boxstyle_wc_wrapper_end', 10);
* Frontend scripts * Frontend scripts
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
/* Flexslider featured
/* ------------------------------------ */
if ( ! function_exists( 'boxstyle_flexslider_featured' ) ) {
function boxstyle_flexslider_featured() {
if( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') !='0') ) {
$script = '
jQuery(document).ready(function(){
var firstImage = jQuery("#flexslider-featured").find("img").filter(":first"),
checkforloaded = setInterval(function() {
var image = firstImage.get(0);
if (image.complete || image.readyState == "complete" || image.readyState == 4) {
clearInterval(checkforloaded);
jQuery("#flexslider-featured").flexslider({
animation: "slide",
useCSS: false, // Fix iPad flickering issue
directionNav: true,
controlNav: true,
pauseOnHover: true,
animationSpeed: 400,
smoothHeight: true,
touch: false,
slideshow: false,
slideshowSpeed: 7000,
});
}
}, 20);
});
';
wp_add_inline_script( 'boxstyle-scripts', $script );
}
}
}
add_action( 'wp_enqueue_scripts', 'boxstyle_flexslider_featured' );
/* Flexslider gallery post format /* Flexslider gallery post format
/* ------------------------------------ */ /* ------------------------------------ */
if ( ! function_exists( 'boxstyle_flexslider_gallery' ) ) { if ( ! function_exists( 'boxstyle_flexslider_gallery' ) ) {

View file

@ -142,7 +142,8 @@ a,
.author-bio .bio-avatar:after, .author-bio .bio-avatar:after,
.widget_calendar caption, .widget_calendar caption,
.commentlist li.bypostauthor > .comment-body:after, .commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after { background-color: '.esc_attr( get_theme_mod('color-1') ).'; } .commentlist li.comment-author-admin > .comment-body:after,
#flexslider-featured .flex-control-nav li a.flex-active { background-color: '.esc_attr( get_theme_mod('color-1') ).'; }
.alx-tabs-nav li.active a, .alx-tabs-nav li.active a,
.comment-tabs li.active a, .comment-tabs li.active a,
@ -177,7 +178,9 @@ img,
#profile-image img, #profile-image img,
.post-list .post-thumbnail img, .post-list .post-thumbnail img,
.post-format, .post-format,
.post-thumbnail img { -webkit-border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; } .post-thumbnail img,
#flexslider-featured.featured .post-inner { -webkit-border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; border-radius: '.esc_attr( get_theme_mod('image-border-radius') ).'px; }
#flexslider-featured.featured .post-title { border-radius: 0 0 '.esc_attr( get_theme_mod('image-border-radius') ).'px '.esc_attr( get_theme_mod('image-border-radius') ).'px; }
'."\n"; '."\n";
} }
// header logo max-height // header logo max-height

View file

@ -135,6 +135,40 @@ Kirki::add_field( 'boxstyle_theme', array(
'step' => '1', 'step' => '1',
), ),
) ); ) );
// Blog: Featured Posts Include
Kirki::add_field( 'boxstyle_theme', array(
'type' => 'checkbox',
'settings' => 'featured-posts-include',
'label' => esc_html__( 'Featured Posts', 'boxstyle' ),
'description' => esc_html__( 'To show featured posts in the slider AND the content below. Usually not recommended.', 'boxstyle' ),
'section' => 'blog',
'default' => false,
) );
// Blog: Featured Category
Kirki::add_field( 'boxstyle_theme', array(
'type' => 'select',
'settings' => 'featured-category',
'label' => esc_html__( 'Featured Category', 'boxstyle' ),
'description' => esc_html__( 'By not selecting a category, it will show your latest post(s) from all categories', 'boxstyle' ),
'section' => 'blog',
'default' => '',
'choices' => Kirki_Helper::get_terms( 'category' ),
'placeholder' => esc_html__( 'Select a category', 'boxstyle' ),
) );
// Blog: Featured Post Count
Kirki::add_field( 'boxstyle_theme', array(
'type' => 'slider',
'settings' => 'featured-posts-count',
'label' => esc_html__( 'Featured Post Count', 'boxstyle' ),
'description' => esc_html__( 'Max number of featured posts to display. Set to 1 and it will show it without any slider script. Set it to 0 to disable', 'boxstyle' ),
'section' => 'blog',
'default' => '3',
'choices' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
) );
// Blog: Frontpage Widgets Top // Blog: Frontpage Widgets Top
Kirki::add_field( 'boxstyle_theme', array( Kirki::add_field( 'boxstyle_theme', array(
'type' => 'switch', 'type' => 'switch',

37
inc/featured.php Normal file
View file

@ -0,0 +1,37 @@
<?php
// Query featured entries
$featured = new WP_Query(
array(
'no_found_rows' => false,
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
'ignore_sticky_posts' => 1,
'posts_per_page' => absint( get_theme_mod('featured-posts-count','3') ),
'cat' => absint( get_theme_mod('featured-category','') )
)
);
?>
<?php if ( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') =='1') && $featured->have_posts() ): // No slider if 1 post is featured ?>
<div class="featured">
<?php while ( $featured->have_posts() ): $featured->the_post(); ?>
<?php get_template_part('content-featured'); ?>
<?php endwhile; ?>
</div><!--/.featured-->
<?php elseif ( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','3') !='0') && $featured->have_posts() ): // Show slider if posts are not 1 or 0 ?>
<div class="featured flexslider" id="flexslider-featured">
<ul class="slides">
<?php while ( $featured->have_posts() ): $featured->the_post(); ?>
<li>
<?php get_template_part('content-featured'); ?>
</li>
<?php endwhile; ?>
</ul>
</div><!--/.featured-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>

View file

@ -3,6 +3,7 @@
<div class="content"> <div class="content">
<?php get_template_part('inc/page-title'); ?> <?php get_template_part('inc/page-title'); ?>
<?php get_template_part('inc/featured'); ?>
<?php get_template_part('inc/front-widgets-top'); ?> <?php get_template_part('inc/front-widgets-top'); ?>
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>

View file

@ -83,6 +83,9 @@
.notebox { font-size: 15px; } .notebox { font-size: 15px; }
/* blog */ /* blog */
#flexslider-featured.featured .post-inner { background: #333; }
#flexslider-featured.featured .post-title { color: #333; background: transparent; font-size: 20px; position: static; box-shadow: none; }
.front-widgets { padding: 10px 20px 10px 20px; } .front-widgets { padding: 10px 20px 10px 20px; }
.front-widget-col { width: 100%; } .front-widget-col { width: 100%; }
.front-widget-inner { margin: 0; } .front-widget-inner { margin: 0; }
@ -173,6 +176,8 @@
#nav-header.nav-container { border-top-color: #e5e5e5; } #nav-header.nav-container { border-top-color: #e5e5e5; }
/* blog */ /* blog */
#flexslider-featured.featured .post-title { font-size: 16px; }
.front-widgets { padding: 10px 15px 10px 15px; } .front-widgets { padding: 10px 15px 10px 15px; }
.post-inner { margin-left: 0; display: block; } .post-inner { margin-left: 0; display: block; }

View file

@ -762,6 +762,33 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
* Post Entry * Post Entry
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
/* post : featured
/* ------------------------------------ */
#flexslider-featured { padding: 30px 0 30px; border-bottom: 1px solid #f2f2f2; z-index: 9; position: relative; }
#flexslider-featured .flex-direction-nav { height: 0; }
#flexslider-featured .flex-direction-nav a { color: #333; background: #eee; }
#flexslider-featured .flex-direction-nav a:before { color: #333; }
#flexslider-featured .flex-direction-nav li { margin-left: 0; }
#flexslider-featured .flex-control-nav { position: absolute; bottom: 10px; left: 2px; right: 0; top: auto; text-align: center; }
#flexslider-featured .flex-control-nav li { padding: 0; margin: 0 4px; }
#flexslider-featured .flex-control-nav li a { background: #ccc; width: 10px; height: 10px; text-indent: -999px; overflow: hidden;
-webkit-border-radius: 100%; border-radius: 100%;
-webkit-box-shadow: none; box-shadow: 0 1px 0 #fff, inset 0 1px 0 rgba(0,0,0,0.2); }
#flexslider-featured .flex-control-nav li a:hover { }
#flexslider-featured .flex-control-nav li a.flex-active { background: #198cff; }
#flexslider-featured.featured,
#flexslider-featured.featured.flexslider { margin: 0; position: relative; }
#flexslider-featured.featured .post-inner { border-radius: 10px; }
#flexslider-featured.featured .post-title { font-size: 26px; border-radius: 0 0 10px 10px; background: rgba(0,0,0,0.4); position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 0; z-index: 9; padding: 10px 20px 10px 20px;
text-shadow: 0 1px 0 rgba(0,0,0,0.7);
box-shadow: 0 -1px 0 rgba(255,255,255,0.07), inset 0 1px 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 10px 10px rgba(0,0,0,0.1); }
#flexslider-featured.featured .post-title a { color: #fff; }
#flexslider-featured.featured li .post { padding: 0 50px; }
#flexslider-featured.featured .post-hover:hover .post-title a { color: #fff; }
#flexslider-featured.featured .post-comments { top: 7px; right: auto; left: 7px; bottom: auto; }
/* post : standard loop /* post : standard loop
/* ------------------------------------ */ /* ------------------------------------ */
.blog .post, .blog .post,