From fb0dde9ba1fc8b8f80fb4b49e5aa17ca3d41e43c Mon Sep 17 00:00:00 2001 From: Alexander Agnarson Date: Sun, 3 Feb 2019 16:14:59 +0100 Subject: [PATCH] Add a featured slider --- content-featured.php | 26 +++++++++++ functions.php | 83 ++++++++++++++++++++++++++++++++++++ functions/dynamic-styles.php | 7 ++- functions/theme-options.php | 34 +++++++++++++++ inc/featured.php | 37 ++++++++++++++++ index.php | 1 + responsive.css | 5 +++ style.css | 27 ++++++++++++ 8 files changed, 218 insertions(+), 2 deletions(-) create mode 100644 content-featured.php create mode 100644 inc/featured.php diff --git a/content-featured.php b/content-featured.php new file mode 100644 index 0000000..94091fa --- /dev/null +++ b/content-featured.php @@ -0,0 +1,26 @@ +
> +
+ +
+ + + + + <?php the_title_attribute(); ?> + + '; ?> + '; ?> + '; ?> + + + + + +

+ +

+ +
+ +
+
\ No newline at end of file diff --git a/functions.php b/functions.php index a96336e..6dc516c 100644 --- a/functions.php +++ b/functions.php @@ -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 /* ------------------------------------------------------------------------- */ @@ -580,6 +599,29 @@ add_filter( 'video_embed_html', 'boxstyle_embed_html_jp' ); * 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 /* ------------------------------------ */ if ( ! function_exists( 'boxstyle_html_js_class' ) ) { @@ -679,6 +721,47 @@ add_action('woocommerce_after_main_content', 'boxstyle_wc_wrapper_end', 10); * 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 /* ------------------------------------ */ if ( ! function_exists( 'boxstyle_flexslider_gallery' ) ) { diff --git a/functions/dynamic-styles.php b/functions/dynamic-styles.php index 038c280..5104e8c 100644 --- a/functions/dynamic-styles.php +++ b/functions/dynamic-styles.php @@ -142,7 +142,8 @@ a, .author-bio .bio-avatar:after, .widget_calendar caption, .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, .comment-tabs li.active a, @@ -177,7 +178,9 @@ img, #profile-image img, .post-list .post-thumbnail img, .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"; } // header logo max-height diff --git a/functions/theme-options.php b/functions/theme-options.php index af71d6d..138cd08 100644 --- a/functions/theme-options.php +++ b/functions/theme-options.php @@ -135,6 +135,40 @@ Kirki::add_field( 'boxstyle_theme', array( '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 Kirki::add_field( 'boxstyle_theme', array( 'type' => 'switch', diff --git a/inc/featured.php b/inc/featured.php new file mode 100644 index 0000000..629591d --- /dev/null +++ b/inc/featured.php @@ -0,0 +1,37 @@ + 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','') ) + ) +); +?> + +have_posts() ): // No slider if 1 post is featured ?> + +
+ have_posts() ): $featured->the_post(); ?> + + +
+ +have_posts() ): // Show slider if posts are not 1 or 0 ?> + + + + + + diff --git a/index.php b/index.php index 2c96dfc..f9b098e 100644 --- a/index.php +++ b/index.php @@ -3,6 +3,7 @@
+ diff --git a/responsive.css b/responsive.css index 5b68697..899dac2 100644 --- a/responsive.css +++ b/responsive.css @@ -83,6 +83,9 @@ .notebox { font-size: 15px; } /* 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-widget-col { width: 100%; } .front-widget-inner { margin: 0; } @@ -173,6 +176,8 @@ #nav-header.nav-container { border-top-color: #e5e5e5; } /* blog */ + #flexslider-featured.featured .post-title { font-size: 16px; } + .front-widgets { padding: 10px 15px 10px 15px; } .post-inner { margin-left: 0; display: block; } diff --git a/style.css b/style.css index ad5bd16..17d8b96 100644 --- a/style.css +++ b/style.css @@ -762,6 +762,33 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4); * 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 /* ------------------------------------ */ .blog .post,