Shiba

Adventures in WordPress

  • Home
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / Genesis Skins / Genesis Skins – Dynamic WordPress Theme

Genesis Skins – Dynamic WordPress Theme

by ShibaShake 4 Comments

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.

How to Get Genesis Skins.

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.
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.
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.
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.
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.
Using the Tangerine font on both the body and header text of our blog page.

How to Get Genesis Skins.

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.

Leave a Reply Cancel reply

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

Comments

  1. Kristina Ponting says

    August 24, 2014 at 9:38 am

    HI:)
    From sweden, I love your theme. Love Kristina:)

    Reply
  2. andrakis says

    January 13, 2013 at 11:11 am

    Hi shiba,
    I loaded the theme update for a few days and all worked fine. Today I got an Genesis Framework update. After loading this, the Genesis Skins theme lost the bottom image. I delete the image for the bottom of the theme and load ist again, but it didn’t help. I delete the update for Genesis Frameworks and use the old version again. Everything is fine. If you don’t get the same issue, maybe I make a mistake when I load the Genesis Skin before the update for Genesis Framework. Would be nice to here from you.
    andrakis

    Reply
    • ShibaShake says

      January 13, 2013 at 2:40 pm

      I haven’t updated Genesis Skins for the new 1.9 framework yet. Still working on some of my plugins and I really want to start playing around with the new Genesis figure on Carrara. 😀

      Reply
      • andrakis says

        January 15, 2013 at 8:01 am

        Ah, ok. Then I use the older version of the Genesis Framework. It works good and I love your theme, so I’ll waiting for your update. I have time and I know how exciting it is to have a new figure or chara. So have fun. 🙂

Recent Posts

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
  • Screenshot of the Success, WordPress has been installed page.Migrating Your WordPress Website to Amazon EC2 (AWS)
  • Screenshot of WinSCP for creating a SFTP configuration.How to Set-Up SFTP on Amazon EC2 (AWS)
  • WordPress Gutenberg code view screenshot of this article.How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS)

Recent Comments

  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS) (1)
    • Erik
      - Great article. All worked great except for this step:apt install php-mysqlChanging to this fixed it:apt install ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (125)
    • Anthony
      - Where does this code go? Like, what exact .php file please?
  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text (1)
    • tom
      - hi,my experience was like the same, but for me as theme developer the "lazy blocks"(https://wordpress.org/plugins/lazy-blocks/) ...
  • WordPress Custom Taxonomy Input Panels (106)
    • Phil T
      - This is unnecessarily confusing. Why declare a variable with the same name as your taxonomy? Why did you choose a taxonomy ...
  • Create Pop-up Windows in Your WordPress Blog with Thickbox (57)
    • Jim Camomile
      - I have used this tutorial several times and it is one of the few simple and effective ways to add popups with dynamic content, ...

Copyright © 2025 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·