post

How to Customize the Genesis Slider with Your Child Theme (without using !important)

Recently, I had the need to use the Genesis Slider and customize it, so I wanted to share with everyone what I did. First, open the Genesis Slider CSS file in your plugins folder (wp-content/plugins/genesis-slider/style.css). Then copy and paste it into your child theme’s style.css file. Then make any and all CSS adjustments you’d like.

Then in your functions.php, add the following:
[php]<?php

add_action( ‘init’ , ‘as247_remove_slider_styles’ , 15 );
function as247_remove_slider_styles() {
remove_action( ‘wp_print_styles’ , ‘genesis_slider_styles’ );
}

[/php]

This bit of code will remove the styling added by the Genesis Slider plugin, thus making your CSS the Slider CSS.

About Travis Smith

As a WordPress Enthusiast, Travis writes about his journey in WordPress trying to help other WordPress travelers and enthusiasts with tutorials, explanations, & demonstrations of the things he learns.

Comments

  1. Thank you for this Travis! I’ve been wanting to do this this ever since the genesis slider was released.

  2. Travis that’s very cool! I was styling is using !important on everything…kind of annoying!! You just saved me a heap of time!

  3. Thanks the tut.

  4. Hey Travis,

    Thanks for this little hack, unfortunately I cannot get it to work with my Balance Child Theme. Was I supposed to paste the genesis-slider.css into a certain area of my style.css?

    Thanks so much!

Leave a Reply

%d bloggers like this: