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

Tweet

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.

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.

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. πŸ™‚

        Reply

Leave a Reply Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (56)
    • Nelson
      - Tanks master - Fine
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (58)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...
    • PhoenixJP
      - Thanks for this tutorial. Does someone knows if this still work with wordpress 5.03 and 5.1.
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • Custom meta-box with a set of radio-buttons.Add a Metabox to Your Custom Post Type Screen (27)
    • mike
      - Hi Shiba am a newbie to wordpress, I just installed a plugin with a custom post type, but has no option for discussion and ...
  • Write a Plugin for WordPress Multi-Site (45)
    • Andrew
      - Hi,action 'wpmu_new_blog' has been deprecated. Use β€˜wp_insert_site’ instead.
  • Populate our Edit Gallery menu using a gallery shortcode.How to Add the WordPress 3.5 Media Manager Interface – Part 2 (29)
    • Janine
      - Still relevant in 2019.
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.

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