Genesis Skins – Dynamic WordPress Theme

Looking for a WordPress theme that is a bit different and suits your very individual personality?

Genesis Skins is a highly customizable WordPress theme, that does not require any technical knowledge, and does not require editing of HTML, CSS, PHP, or Javascript. It combines many of the dynamic elements of my previous Shiba theme, with the power of the Genesis framework, to provide a clean design that is highly customizable and mobile responsive.

Blog images, colors, menus, and more can be customized directly from your WordPress administration panel using a simple visual interface. Changing from a light blue theme to a dark red theme or a classy silver theme is just a few button presses away.

Make your blog into its own one of a kind – just like you. Enjoy!

Note: Genesis Skins is built on top of the Genesis Framework. It will only work if the Genesis parent theme is installed.

[Most recent Genesis Skins updates]

December 23rd, 2015 – Release 1.8

• Updated Edit Skin interface so that it works with the Theme Customizer updates in WP 4.4.
• Tested on WordPress 4.4.

Genesis Skins uses the new WordPress theme customizer interface, as well as the new media manager interface. Therefore, it can only be used with WordPress 3.5 and above.

Skin Creation and Customization

We can create new skins or edit existing skins by going to the Genesis Skins menu tab on our WordPress Dashboard. A screenshot of the skin editing interface is shown below.

We can currently customize:

• Skin images – header, footer, body (repeats itself between the header and footer images), background, and widget.
• Skin colors – header text, link text, body text, blog color, widget color, and background color. This Color Scheme Designer can help with picking a blog color palette.
• Skin menus – each skin can be associated with different primary and secondary menus.
• Other skin settings – including blog border, header and footer heights, and more.

If the Shiba Gallery plugin is installed, we can also associate our skins with the different gallery frames provided by the plugin. For example, the images and galleries on this page uses a simple white frame which is different from the gallery frame used in the front page of this blog.

Skin customization visual interface.

The skin design interface uses similar controls as the WordPress theme customizer. However, instead of saving customizations to a single theme design, we can now save our creations into a skin object, and create as many skin objects as we want.

Once a skin is created, we can assign it to different posts, pages, tags, categories, and more in our WordPress blog. For example, this particular page uses a different skin than my blog frontpage.

Once a skin is created, we can assign it to different posts, pages, tags, categories, and more in our WordPress blog.

Other customizations, such as adding in new text segments, or adding in third-party advertisements is done through the WordPress Widget interface. The Genesis Skins theme is widget-ready and includes all the standard Genesis widget areas. In addition, it also includes –

• A full-width header widget area.
• A full-width footer widget area.
• A post inset area.
• A before post widget area.
• An after post widget area.

Multi-column widget support is available through the Shiba Widgets plugin.

Example multi-column header widget.

Genesis Skins Feature List

• Blog images, colors, menus, and more are customizable directly from our WordPress administration panel through a simple visual interface. Images can be loaded from our local computer or from our WordPress Media Library.
  No PHP, Javascript, or CSS knowledge is required.
• Different skins can be assigned to categories, posts, and pages. This WordPress blog, for example, has different skins for many of the category groups, as well as some individual skins for some posts and pages.
• Skins can be exported and imported using the standard WordPress import/export tool. This allows us to easily move our skin designs from blog to blog similar to our WordPress posts.
• Change blog-wide body and header fonts through a simple drop-down interface in the Genesis Skins >> Settings page.
• Easily add your own Google Fonts by hooking into the genesis_skins_fonts filter.
• Genesis Skins is mobile responsive.

How to Add Your Own Google Fonts

We can add our own google fonts into the Genesis Skins theme by hooking into the genesis_skins_fonts filter. Below, is an example of how we added the Tangerine font.

// Add to theme functions.php file
add_filter('genesis_skins_fonts', 'my_theme_fonts');

function my_theme_fonts($fonts) {
	$fonts['tangerine'] = 'Tangerine, "Times New Roman", serif';
		return $fonts;
}

Easily assign body and header fonts from the Genesis Skins >> Settings page.

Line 5 – The first name (e.g. Tangerine) has to be a valid font on Google Fonts. Only the first font will be loaded from Google.

This will add Tangerine to the drop-down menu on the Genesis Skins >> Settings page. Then, we can easily select it and assign to our blog pages.

Using the Tangerine font on both the body and header text of our blog page.

Genesis Skins Updates

Genesis Skins 1.7.1

August 30th, 2015

• Fixed “Add New” button so that it directs to Theme Customizer.
• Tested on WordPress 4.3.

Genesis Skins 1.7

April 28th, 2015

• Updated theme customizer saving function so that multiple skins can be edited at the same time.
• Removed unnecessary controls from the Edit Skin interface.
• Tested on WordPress 4.2.

Genesis Skins 1.6.3

January 9th, 2015

• Fixed skin saving issues as well as header/footer image updates in the Edit Skin interface. These issues were introduced by changes to the Theme Customizer code in WordPress 4.1.
• Tested on WordPress 4.1.

Genesis Skins 1.6.2

September 14th, 2014

• Remove ID field from the Edit Skin screen.
• Tested on WordPress 4.0 and Genesis 2.1+.

Genesis Skins 1.6

April 22nd, 2014

• Enable header font sizes to be controlled separately. This enables us to use very different font styles (font families) for header and regular text, and still have them work well together.
• Made the article padding for mobile displays be consistent for both fill and non-fill (bordered page) skin types.
• Fixed some style errors.
• Tested on WordPress 3.9.

Genesis Skins 1.5

October 23rd, 2013

• Updated for Genesis Framework 2.0+.
• Uses HTML5 structured markup language.
• Added new menubar styling options as well as collapsible menubars for small devices.
• Added some styles to make standard Poll Daddy objects mobile responsive.
• Pages can be rendered with an open design (no borders) or with page borders. This can be assigned on a skin by skin basis.
• Integrated with Genesis 2.0 stylesheet.

Genesis Skins 1.3

March 26th, 2013

• Updated for Genesis Framework 1.9.1.
• There was a big change in stylesheet from Genesis 1.8 to 1.9. Options are provided in Genesis Skins >> Skin Settings to set menu styles and button styles according to 1.8 or 1.9.
• Edit Skin changes should now instantaneously update the preview frame. Faster skin updates are enabled through javascript.
• Edit Skin uses the new media manager interface for assigning header and footer images.
• Header text position is now set relative to the center of the browser. This allows the text to stay in a static position with respect to the background image.
• Theme Customizer object is now only loaded for theme customizer screens. This makes the theme cleaner and more efficient.

Genesis Skins 1.1

December 21st, 2012

• Updated for 3.5 (added AJAX screen checks, fixed wpdb::prepare, updated media upload interface check).
• We can now change site body and header fonts through the Genesis Skins >> Settings page.
• Add your own google fonts by hooking into the genesis_skins_fonts filter.

Genesis Skins 1.0

November 9th, 2012

• Create and manage skins for the Genesis framework.
• Customize skin images, colors, menus, and more using the new WordPress theme customizer.
• Assign different skins to posts, pages, categories, tags, and more.
• Mobile responsive design.

Related Articles

Genesis Skins 1.5

Genesis skins allows you to flexibly create and assign skins to different posts, pages, or other custom post types. We can assign skins to an individual post or to groups of posts through the use of categories and tags. Skins are created through a graphical UI based on the WordPress theme previewer interface, therefore no special CSS, HTML, or PHP editing is required. [Full description of the Genesis Skins theme] Note: Genesis Skins is built on top of the Genesis Framework. It will only [...]

Shiba Skins WordPress Theme

Shiba Skins allows you to assign images, colors, and more on a page by page basis. Theme customization options are saved into a skin, which we can then be applied to a specific post or to a group of post objects. Shiba Skins contains similar skinning functionality as Genesis Skins, but is built on top of the Twenty Twelve framework, which is free and developed by WordPress. Since it is based on Twenty Twelve, it is mobile responsive and supports all the other Twenty Twelve functionality. [Most [...]

WordPress Theme Images

All these WordPress theme images are created for the Genesis Skins WordPress theme, but they can also be used with other themes (with proper attribution). Pick which theme images you want, and save them onto your computer. Then simply load them into a skin of your choice. Here are more detailed instructions on how to create and load images into Genesis Skins.