Nav Social Menu

    • Facebook
    • Instagram
    • Pinterest
    • Twitter

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
    • Custom Theme
    • Collaborations
    • WordPress Support
  • Themes
  • Home
  • Courses
  • Blog
  • 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

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

GenesisWP, Tutorials, WordPress Leave a Comment

Get Simply Noted for Free!

This is a free theme we’ve built for the Genesis Framework. It will help your reader focus on the very content you create on your site. This is a clean, simple theme to showcase your writing or photography skills.

Previous Post: « Create a Custom Default Avatar
Next Post: Genesis Settings Explained »

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

Simply Noted Theme


Simply Noted

A simple theme for the genesis framework. A great theme for writing out your thoughts. Grab this free theme today!

Download Theme!

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

Footer

Dev Info

  • How it Works
  • Trusted Partners
  • Client Portal

Explore

  • Portfolio
  • Resources

Product Support

  • Theme Documentation
  • Submit A Ticket
  • Support Policy

Grab my secrets on how I manage a WordPress site.

Although it hasn't been busy on this here feed. It Although it hasn't been busy on this here feed. It's been busy in the actual business. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
In Q1 we launched 2 sites, migrated 7 accounts to ConvertKit, and added 1 business to Genesis Tuneup. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Tell me about your Q1 wins and what you look forward to in Q2?
Spring is almost here and I can’t wait to share Spring is almost here and I can’t wait to share all the amazing things my clients have been up to this winter.
Oh hi there 👋🏾​​​​​​​​

We’re still here just not as active in the winter months. That’s the thing about running a business while disabled. Prioritizing were your energy goes during the painful months.  Clearly my energy isn’t for social media. 

See you in spring and Laissez les bons temps rouler.
Merry Christmas to you all!⠀⠀⠀⠀⠀⠀⠀⠀⠀
I hope it's full of good in whatever form that may be.
Back in the office after my birthday celebration. Back in the office after my birthday celebration. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Q4 is going to be a straight banger, so many exciting new things I can’t wait to share with you. 
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What are you working on?
Have you ever wanted to hire a developer to help y Have you ever wanted to hire a developer to help you with your site but for tweaks and integrations?⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
VIP Days are back! ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Sometimes you don't need a full development package for a custom theme. Because there's a good chance you already have a website but need to make some changes to it Sometimes you need to simplify your site to work better or install an improved theme. Got a plugin that's wracking yours or a client's site. I can help you find a better solution to that problem. Or you're just ready to implement a funnel, workflow, etc to get that passive income coming in.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
DeCoded can help you do just that. Here's how it works...⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Pick Your Date​ 🗓⠀⠀⠀⠀⠀⠀⠀⠀⠀
We're available on select Monday mornings PST.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Morning Coffee​ ☕️⠀⠀⠀⠀⠀⠀⠀⠀⠀
We sit over a cup of coffee and break down what we're working on for the day.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
8 Hours of Development​ 👩🏾‍💻⠀⠀⠀⠀⠀⠀⠀⠀⠀
I'll spend the rest of the day working on your development task.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Email Support​ ✉️⠀⠀⠀⠀⠀⠀⠀⠀⠀
You'll receive a whole week of support via email after everything is in place.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Book today! Link in Profile

Copyright 2009 - © 2022 · Riot Customs LLC · Privacy Policy · Terms of Service
Riot Customs LLC has no offical affiliation with StudioPress
Return to top of page