How To Load Custom Stylesheet In Genesis Theme

Genesis offer dozens of possibilities to customize and personalize your website. One among its ability is to allow the integration for custom stylesheet. This feature allows you to take your website’s design to new level.

Actually using custom stylesheet allows you to modify the design and content layout of your website without touching or editing the original theme’s style. This in-turn helps to keep your CSS structured, w3c validated and most importantly allows you to understand the elements without messing up with codes.

Below I am featuring some of the benefits of loading custom style sheet in genesis framework.

• You can modify content, sidebar, footer, header or simply the warp width.
• Add style support for different services or plugins. For example if you use any related post plugin, then using CSS you can easily customize the way it presents the related posts.
• You can add different sets of download, information buttons and social networking icons.
• You can use font-awesome to add retina ready icons.
• You get freedom to use almost any custom webfont.

And you have infinite possibilities. You have to just imagine and have to add the concerned style related to that HTML element.

Add Custom Stylesheet In Genesis Theme Framework

add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
	wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/custom.css', array(), PARENT_THEME_VERSION );
}

Above I have presented the code snippet which you have to add in your theme’s function.php file. The above code will help you load an external stylesheet named as custom.css along with your primary and other css files.

Replace Primary Style.Css

add_filter( 'stylesheet_uri', 'custom_replace_default_style_sheet', 10, 2 );
function custom_replace_default_style_sheet() {
	return CHILD_URL . '/custom.css';
}

Use the above code if you want to replace your main or primary style. This snippet will not allow your main css to load and instead will load custom.css and will ask web browsers to execute all its styles.

Now inorder to add load an external style you have to create a new custom.css file and have to upload it your theme’s or chile theme’s directory. For example http://yourblog.com/wp-content/themes/your-genesus-child-theme/custom.css .

You can use web-based file manager or any FTP program to upload this file to your web host. Once done you can edit the file from your wordpress theme editor region.

For any other details regarding this post contact me or leave your question in comment section.