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 / WordPress Theme –Create Your Own in 3 Easy Steps

WordPress Theme –
Create Your Own in 3 Easy Steps

Tweet

by ShibaShake 31 Comments

When I started looking around for free WordPress themes, I realized two things –
1) There are about a gazillion free WordPress themes, and
2) Most of them look very similar to each other.

Sure there are ones with one column, two columns, or three columns, but it was difficult to get excited over any of them. Customization was almost always limited to the header image of the theme, and everything else was set.

Using any one of these WordPress themes will make my blog look like just any other WordPress blog. I wanted to create something different, without having to do a lot of HTML, CSS, PHP, or Javascript coding.

Here are three simple steps to create a unique WordPress blog that is based on compelling visual components rather than just text and columns.

Example blog using the highly customizable Shiba WordPress theme.
Example blog using the highly customizable Shiba WordPress theme.

1. Download Custom Theme

To get started on designing your own image-based blog, first download and save the Genesis Skins Theme.

1. Activate this theme by going into your WordPress blog administration panel. Click the Appearance menu on your left sidebar.

WordPress administration screen-shot for downloading new themes.
WordPress administration screen-shot for downloading new themes.

2. Click on the Install Themes tab at the top.

3. Once you are in the Install Themes screen, click the Upload menu option at the top of the screen. This will let you download and install the Genesis Skins Theme you just saved.

Once the theme is activated, there should be a new tab to the left of your WordPress Dashboard called Genesis Skins (under the Appearance tab).

New Genesis Skins tab.
New Genesis Skins tab.

2. WordPress Theme Colors

The next step in creating your WordPress theme is to set the colors of your blog. Click on the Genesis Skins tab, and select the Add New button at the top of the screen.

Type in a title for your new skin. Then, you are ready to set the theme colors.

There are five different colors that you can define in your WordPress theme –

  1. Header text – This is the color of your blog title and article titles.
  2. Linke text – This is the color of links within your blog.
  3. Body text – This is the color of the regular text in the body of your blog.
  4. Blog color – This is the color of your blog page.
  5. Background color – This is the color of your blog background.
  6. Widget color – This is the color of your blog widgets.

The Edit Skins screen gives you a color selector for each setting.

  1. Click on the color drop-down menu.
  2. This will display the color-wheel for the particular setting.
  3. As you select different colors, the text and background colors of the preview area to the right will change. This gives you an idea of how your blog colors will look together.
Select your WordPress Theme colors.
Select your WordPress Theme colors.

Once you are happy with your color choices, click on the Save & Publish button at the top left of the screen. This will save your skin color choices.

After you have saved your skin, go back to the Genesis Skins screen and click on the View button right under the title to get a preview of your skin.

In general, you want to stick to a color family, for example, blues, greens, purples, or browns.

Once you have decided on a color family, consider adding one accent color. It is usually best to pick an opposing accent color. For example, if your theme palette consists of a cool colors (blues or greens) then you want to pick a hot accent color (reds, yellows). The opposite is also true. The accent color will give your WordPress theme some kick, and make it stand out to the eye of your readers.

If you are looking for blog color ideas check out this Color Scheme Designer.

An example dog blog using the Shiba WordPress theme.
An example dog blog using the Genesis Skins theme.

Be careful not to use too many opposing colors, however, as that will create a busy visual landscape of colors and make your blog difficult to read.

The Edit Skin screen also allows you to change the position of your blog title in your header image. Place your blog title where it is most visible based on your chosen background header image and your chosen header text color.

To do this, simply drag and drop your header text in the interface. Once you are satisfied with the results, click on the Save button at the top-left corner of the screen.

3. WordPress Theme Images

The final step in creating a unique WordPress theme is to find the proper images to use.

  • In general, you want to find images that are centered around a consistent idea, or concept.
  • Make sure that the images are both compelling and complement the textual content of your WordPress blog.
  • In addition, make sure that the coloring, mood, and tone set by your images are all consistent.

To customize the images on your blog, click on Genesis Skins tab and edit the skin of your choice. Click on the Skin Images tab to the left to insert and remove images. You can upload images from your computer or use existing images in your WordPress Media Library.

Change skin images.
Change skin images.

You may place your own images in five key areas – header, footer, body, widget, and background.

To upload an image from your computer, click on the Upload New tab, then click on ‘select a file’. This opens up a pop-up window that allows you to select an image from your local computer.

To use an image from your WordPress Media Library, click on the Media Library tab. Next, click on the Open Library button. This opens up a pop-up window that allows you to select images from your blog media library.

Select an image from your local computer or from your blog Media Library.
Select an image from your local computer or from your blog Media Library.

Select the image of your choice and click on the Insert into Skin button. This process is exactly the same as inserting images into your blog posts, except here the images will be inserted into your blog-skin. You can get the best results by first constructing the images to-size in a separate photo or image manipulation program, and then just loading in the finished product.

Some tweaking may be necessary to make sure that your images will fit well together and merge organically into your website design.


You can obtain free images and photos from a variety of websites. However, you may need to alter the images you collect to make them visually consistent.

You can also create your own images. There are a variety of methods to create 2D images including drawing your own designs, taking photographs, and using 3D models. Rendering images from 3D models can be especially fun, and can produce some high quality images in a fairly short amount of time, even with limited artistic skills.


Free 3D Models

For example, the themes on this website are created with Carrara, Photoshop, and 3D-models from Daz 3D.

This Is It!

Once you are done, apply your new theme to your entire blog –

  1. Go into Genesis Skins >> Skin Settings in your WordPress Dashboard.
  2. Select the new skin you just created from the Default Skin drop-down menu.
  3. Click on the Save Settings button at the bottom of the screen.
Apply your new skin to your entire blog.
Apply your new skin to your entire blog.

You are all done. Enjoy your new image-based WordPress theme!

If you encounter any errors or have any suggestions, please let me know by leaving a comment below.

Related Articles

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 [...]

Genesis Skins - Dynamic WordPress Theme

Simple and unprecedented customization of your blog posts. Easily assign header and footer images, change blog colors, adjust title position, header height, footer height and more, all from the WordPress Theme Customizer interface. Save these settings into a skin object, and assign skins to any set of posts and pages. Built on top of the Genesis Framework.

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. Christy says

    April 28, 2017 at 6:33 am

    I hope you get this message, I just found this site and bought the genesis framework because I like the way your site looks and feels. Now that I’ve found this tut the download link doesn’t work and your plugins aren’t there. I’m willing to pay for them.
    I’m a daz creator and would love my site to look like this. As it is I’m stuck at what it looks like now.
    Please leave me a message or email me and let me know.
    Thanks

    Reply
  2. K Roussi says

    July 4, 2011 at 2:28 pm

    Great Tutorial. Easy to follow.

    Reply
  3. Scott says

    March 8, 2011 at 1:04 pm

    The theme is not showing up correctly and I cannot make any changes at all to the “add new” part of the theme. I am using wordpress 3.1 any suggestions?

    Reply
    • ShibaShake says

      March 9, 2011 at 4:29 pm

      Hmmm that is strange. The more details you can provide me, the better I will be able to help debug it. For example –
      1. Can you use one of the existing Shiba themes?
      2. What changes are you making? Changing colors? images? What happens when you make the changes, does the screen update?
      3. Is it an issue with Save? I.e., changes are made but they are not saved?

      Also, if you can provide me with a link to your site with the Shiba Theme activated, then I can have a look at the HTML.

      Reply
      • Scott says

        March 12, 2011 at 3:45 pm

        I don’t have a published website as of right now. I am only in the design process. When I activate the theme all I get is the title at the top, a black sidebar with no information, and black boxes here and there. keep in mind, I have made no changes at all to the theme. when creating a new page, none of the options are available for me to change. no matter what I do, i get the same results.

        Reply
        • ShibaShake says

          March 12, 2011 at 7:43 pm

          My guess is that it is a conflict related to the server. I have only tested the theme on Apache servers, and certain functions within the theme may operate differently on a different server platform.

          Reply
          • Anonymous says

            March 13, 2011 at 6:15 pm

            I am running MAMP. so the server is apache. I also tried to run it with xampp on my linux box with the same results.

          • ShibaShake says

            March 18, 2011 at 12:51 pm

            Hmmm, that is strange. My guess is that it is coming from the hash functions used in theme.

            My plan is to remove these on the next update of the theme but that may not be for a while. I just got a new puppy and keeping the ball of nuclear energy in check takes away most of my programming time. πŸ˜€

          • Scott says

            March 14, 2011 at 8:13 pm

            If you email me your email address I can send you screenshots of what you need to see to help me remedy the problem. I really like your themes and would like to use them if possible.

  4. ShibaShake says

    July 25, 2010 at 7:33 am

    Hello Neil,

    Here is what I would try –
    1. Reinstall the theme from scratch. Do Preview – does that work?
    2. Activate the theme proper (not a child theme) does that work?

    If you point me to your test website, I can have a look at the HTML files generated.

    Reply
  5. charles says

    June 26, 2010 at 6:00 am

    uibel.com

    I’m really looking forward to this theme, yet I get an error when I click on any of the new links in admin:
    Fatal error: Call to undefined method Shiba_Theme_Menu::_da6f21bef() in d:\WebSites\ChUibel\uibel.com\wp-content\themes\shiba\shiba-theme-menu.php(383) : eval()’d code on line 1
    PHP Fatal error: Call to undefined method Shiba_Theme_Menu::_da6f21bef() in d:\WebSites\ChUibel\uibel.com\wp-content\themes\shiba\shiba-theme-menu.php(383) : eval()’d code on line 1

    The theme does seem to change successfuly

    hep me please!

    Reply
    • ShibaShake says

      June 26, 2010 at 8:12 am

      Hmmm … did you get these errors right off or did you make changes to the template files? If you let me know what changes you made, I will have a better idea what the issue is.

      Reply
      • Neil says

        July 25, 2010 at 3:46 am

        Just wondering if you found the solution to that problem above? Just wanted to try this myself and same error. Deactivated all plugins no change, using wp 3.0.

        Theme installed fine but as above cannot customise anything. Widgets work but not other options.

        Reply
  6. cindyvine says

    December 12, 2009 at 11:36 pm

    Thanks Shiba have bookmarked this!

    Reply
  7. shibashake says

    October 12, 2009 at 11:35 pm

    I should add that WordPress.com limits what you can do on their site, so the above can only be achieved if you are running your own WordPress blog.

    Reply
  8. shibashake says

    October 12, 2009 at 11:34 pm

    Thanks Duchess. Let me know if you run into any problems or have any issues. I am really into WordPress lately, so will be happy to help πŸ™‚

    Reply
  9. Duchess OBlunt says

    October 12, 2009 at 11:33 pm

    This is a great hub. It’s packed full of information that I NEED to learn. It’s book marked for the first available time slot I can work into getting some of this done!
    Very well laid out and I’m hoping I can get some of the instructions done correctly. I’m with frogdroppings, I need so much help. I’m hoping this works for me.
    Thank you for taking the time to put it together in such a way that I think even I can do it.

    Reply
  10. shibashake says

    August 12, 2009 at 11:32 pm

    Thanks KevCC πŸ™‚ My next projects are to add the ability to save your themes, so that you can easily switch one out for another.
    Then I am thinking it will also be fun to allow the attachment of different themes to different tags – e.g. Have all your Halloween articles have a certain theme, all your stained glass articles another theme, sports another theme, etc.
    This is turning out to be fun! πŸ™‚

    Reply
  11. KevCC says

    August 12, 2009 at 11:31 pm

    Great stuff, really useful.

    Reply
  12. shibashake says

    August 12, 2009 at 11:30 pm

    Thanks Camping Dan πŸ™‚ Hope you enjoy the theme.

    Reply
  13. Camping Dan says

    August 12, 2009 at 11:29 pm

    Helpful info! I have been wanting to have a custom theme for my two blogs but I did not want to pay to have this done.

    Reply
  14. shibashake says

    August 12, 2009 at 11:28 pm

    Glad you liked it P&O. I had a lot of fun with it, and will be creating more images and themes for it as well πŸ™‚

    Reply
  15. Plants and Oils says

    August 12, 2009 at 11:27 pm

    That’s wonderful, thank you very much.

    Reply
  16. shibashake says

    August 12, 2009 at 11:25 pm

    @dohn – Still waiting on that dim sum πŸ˜‰
    @Nancy – Thanks Nancy.
    @quicksand – In that case, I must write some themes for Blogger as well πŸ™‚
    @FD – We can help each other. We can alternate being fick πŸ™‚ It will be fun.
    @RCold – Good to see you again πŸ™‚ Btw, welcome to HubPages!

    Reply
  17. RCold says

    August 12, 2009 at 11:24 pm

    This is another great Hub!

    Reply
  18. frogdropping says

    August 12, 2009 at 11:23 pm

    Shiba – my gorgeous I wasn’t asking for help (though help is good) I was meaning I’m fick πŸ™‚

    Reply
  19. quicksand says

    August 12, 2009 at 11:22 pm

    I use blogger and I am quite happy with it. πŸ™‚

    Reply
  20. Nancy's Niche says

    August 12, 2009 at 11:21 pm

    Very impressive information on theme buildingβ€”thanks for sharing.

    Reply
  21. dohn121 says

    August 12, 2009 at 11:20 pm

    This is really awesome. I really am impressed by all the information I get from you, shibashake. I feel like dining for free over hear and feel guilty about it. I’m definitely bookmarking this! Thanks a million.

    Reply
  22. shibashake says

    August 12, 2009 at 11:19 pm

    Yay my favorite green friend! I will help you with whatever you need. Just give me a dog cookie πŸ™‚

    Reply
  23. frogdropping says

    August 12, 2009 at 11:18 pm

    Shiba – I’m woefully pants with such things. I can’t even seem to remember half of what I read, even though I’m taking it in when I’m reading it.

    I’ve even been known to sit with instrutions (and follow them) and still muck wordpress and the like up.

    You’re fab! I need a little piece of you πŸ™‚

    Happy to see you and hope you are well!!! (And your pooches)

    Reply

Leave a Reply to K Roussi 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

  • 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.
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (57)
    • 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 ...
  • WordPress Search Widget – How to Style It (55)
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • 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.
    • Darshan Saroya
      - I want to access two different types of taxonomies like city and room, how can I access it via wp permalink?
  • How to Selectively Load Plugins for Specific Pages (6)
    • cla
      - Perfect! But at first I was misled, I thought the path / wordpress-theme / was an your alias of / theme .. and nothing happened.. ...
    • Aeros
      - Hi, I have tried your way. My problem is i'm using boilerplate to most of my plugins. When i tried to include the plugin ...
  • Write a Plugin for WordPress Multi-Site (44)
    • An Quach
      - I always use single site because it's easy for me to managed. When I need another worpdress on subdomain or subfolder, I ...

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