• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Riot Customs

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
  • Blog
  • Shop
  • Contact

Place Slider Above Blog Archive

Written by Katrina

8 shares
  • Facebook2
  • Twitter
  • LinkedIn
  • Tumblr
  • Buffer
  • Email

What is the first step?
First we’ll need to add a new hook for the slider area into our funtions.php file. This will add the widget area into the blog archive template which is page_blog.php. This is built into Genesis, unless your Genesis theme says otherwise.


//* Hooks slider above blog content
add_action( 'genesis_before_loop', 'riot_above_blog_slider'  ); 
function riot_above_blog_slider() {
if (is_page_template( 'page_blog.php' ) || is_home()) {
    
    genesis_widget_area( 'above-blog-slider', array(
		'before' => '',
		'after'  => '',
    ) );

}}

So next you’ll need to registar the widget using the code below. This will create the widget area in the dashboard.


// Register widget areas
genesis_register_sidebar( array(
	'id'				=> 'above-blog-slider',
	'name'			=> __( 'Home - Blog Slider', 'bold' ),
	'description'	=> __( 'This is the top section above blog.', 'bold' ),
) );

Make sure to save you file before moving on to the last step.

Now you’ll need to add the CSS coding into your styles.css file. This will give it the look and feel.
*This code is bare bones for your own customizations.


/* Genesis Responsive Slider
--------------------------------------------- */
.content #genesis-responsive-slider {
	border: 1px dotted #ddd;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.content .slide-excerpt {
	background: transparent;
	margin: 0 0 20%;
	opacity: 1;
	width: 100%;
}

.content .slide-excerpt-border {
	border: 0;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

.content .slide-excerpt-border h2 {
	margin: 0;
	text-align: center;
	width: 100%;
}

.content #genesis-responsive-slider h2 a {
	background: #ff7f8c;
	color: #fff;
	font-size: 14px;
	margin: 0;
	overflow: visible;
	padding: 10px;
	text-align: center;
	width: 100%;
}

.content .flex-direction-nav li a {
	background: url('images/slider-arrows.png');
	top: 40%;
}

.content .flex-direction-nav li .prev,
.content .flex-direction-nav li .prev:hover {
	background-position: 0 0;
	left: 0;
}

.content .flex-direction-nav li .next,
.content .flex-direction-nav li .next:hover {
	background-position: -52px 0;
	right: 0;
}

.content .flex-direction-nav li .prev:hover,
.content .flex-direction-nav li .next:hover {
	opacity: 0.9;
}

.content .flex-control-nav li a {
	background: url('images/slider-arrows.png');
}

.content .flex-control-nav li a.active {
	background-position: 0 -26px;
}

.content .flex-control-nav li a:hover {
	background-position: 0 -12px;
}

Try Out The Demo
CLICK HERE

Plugin’s you’ll need to add
Genesis Responsive Slider
Regnerate Thumbnails

Previous Post
Next Post
8 shares
  • Facebook2
  • Twitter
  • LinkedIn
  • Tumblr
  • Buffer
  • Email

GenesisWP, Tutorials, WordPress Leave a Comment

Reader Interactions

Share Your Thoughts
Cancel reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Maven Theme

Maven Lite

A single page theme using Kadence. A great theme for a simple site to showcase your skills. Grab this free theme today!

Download Now!

Categories

  • Blogging
  • Business
  • Client Work
  • ConvertKit
  • Freebie
  • GenesisWP
  • Interact
  • Personal
  • Theme Releases
  • Theme Updates
  • Tools & Software
  • Tutorials
  • Web Design
  • WordPress

Master ConvertKit

A kick ass tech course on using the ConvertKit software. Want to start growing your list with the best email marketing software out there? What are you waiting for? Grab this course now!

Enroll Now!

Popular Post

change domains dns

How To Change Your Domains DNS

4 Steps to DIY Your Way to A Professional Looking Website

About Lead Your Page + Giveaway

How to Use the Landing Page Template

Buy me a coffee
Newsletter

Tails from the Beast

Join our newsletter for tips on how to use the WordPress platforms. Advance your skills, and most importantly, puppy photos.

Please enter your name.
Please enter a valid email address.
Sign Me Up!

Thanks for subscribing! Please check your email for further instructions.

Something went wrong. Please check your entries and try again.

Development Information

  • How it Works
  • Trusted Partners
  • Portfolio
  • Client Portal

Explore

  • Resources
  • Terms of Service
  • Privacy Policy
  • Disclamier

Having a dedicated space has made life so much eas Having a dedicated space has made life so much easier. Especially since I’m still to this day dealing with migraines. Yes I still have them. 

How are you making work life easier for 2023?
Just here to show proof of life. Still dealing wit Just here to show proof of life. Still dealing with the migraine that I’ve had since July. 

I’ve been a busy bee working at ConvertKit doing migrations. Working on new digital products and keeping WordPress sites secure and up to date.

You can always sign up for my services, link in bio.
Late night work sessions. Something I’m still wo Late night work sessions. Something I’m still working on about my boundaries in my business.
Sometimes you have a project that doesn't require Sometimes you have a project that doesn't require a massive development package. ​​​​​​​​
​​​​​​​​
It's short simple and to the point sometimes it's just a site refresh with some changes here and there. ​​​​​​​​
​​​​​​​​
Development days are a great way to get development for your smaller projects.​​​​​​​​
​​​​​​​​
Link in profile!
You're a soloprenerur or a small business owner re You're a soloprenerur or a small business owner ready to for the extra bit an oomph to push you forward.​​​​​​​​
​​​​​​​​
You're on a budget but ready to take the online world by storm. ​​​​​​​​
​​​​​​​​
You are able and willing to work as a member of the team and hit those deadlines. ​​​​​​​​
​​​​​​​​
You're not about that basic life.​​​​​​​​
​​​​​​​​
You're sick of Corona's shit and ready to start now!​​​​​​​​
​​​​​​​​
We created a theme modification service to help you achieve those website goals. ​​​​​​​​
​​​​​​​​
Link in profile!
Your zone of genius is design but not programming Your zone of genius is design but not programming languages. Our zone of genius is in both design and programming languages. ​​​​​​​​
​​​​​​​​
We're here to help you boost your designs into a functional and secure WordPress theme.​​​​​​​​
​​​​​​​​
Let us be your partner in code. We help bring your designs to life with a functional and secure custom WordPress theme.​​​​​​​​
​​​​​​​​
Link in bio

© 2009 - 2023 Riot Customs, LLC.

Powered by Flywheel & Beaver Builder.