• WordPress Theme -
    Create Your Own in 3 Easy Steps
    by ShibaShake

    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 theme that is based on compelling visual components rather than just text and columns.

    1. Download Custom Theme

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

    Activate this theme by going into your WordPress blog administration panel. Click the Appearance menu on your left sidebar, and pick the Add New Themes option.

    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 Shiba Theme you just saved.

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

    2. WordPress Theme Colors

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

    Type in a title for your new theme. 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 color. This is the color of your blog title.
    2. Sub-header text color. This is the color of the main headings, and story titles of your blog.
    3. Body text color. This is the color of the regular text in the body of your blog.
    4. Link text color. This is the color of links within your blog.
    5. Background color. This is the color of your blog background.

    The Custom Colors screen gives you a color selector and a row of buttons for selecting these five different classes of text.

    1. Click on the text class you want to select the color for.
    2. Then, select the color using the color-wheel on the left.
    3. As you select different colors, the text and background colors of the paragraph above will change. This gives you an idea of how your blog text will look like together.

    Once you are happy with your color choices, click on the Publish or Update button at the top right of the screen. This will save your theme color choices.

    After you have saved your theme, click on the View Theme button right under the title to get a preview of your theme.

    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 Color Scheme Designer.

    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 Theme 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 Publish or Update button at the top right 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.

    The Shiba Theme already has a variety of free image themes available.

    To customize the images on your blog, click on Shiba Themes tab. Hover your mouse over your new theme. This reveal a set of actions you may perform on the theme. Click on the Images action.

    This opens up the Customize Images screen which allows you to easily upload and change the images of your theme.

    You may place your own images in five key areas – header, footer, upper sidebar, lower sidebar, and the menu titles on your sidebar.

    To upload an image, click on the Pick an Image button. This opens up a pop-up window that allows you to 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 Theme button. This process is exactly the same as inserting images into your blog posts, except here the images will be inserted into your theme.

    Try to make your header and upper sidebar images combine well, so that one flows into the other in order to achieve a more organic look. You can do the same for your footer and lower sidebar images.

    The custom image interface also has a simple crop facility that allows you to properly size your images. However, 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.


    In addition to the free image themes provided, you can also 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.

    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 Shiba Themes >> Theme Options in your WordPress Dashboard.
    2. Select the new theme you just created from a drop-down menu.
    3. Click on the Save Options button at the bottom of the screen.

    You are all done. Enjoy your new image-based web theme and I am sure your readers will enjoy it as well.

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

    Related Articles

    30 Comments
    1. Great Tutorial. Easy to follow.

      2:28 pm on July 4th, 2011 Reply
    2. Scott

      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?

      1:04 pm on March 8th, 2011 Reply
      • 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.

        4:29 pm on March 9th, 2011 Reply
        • Scott

          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.

          3:45 pm on March 12th, 2011 Reply
          • 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.

            7:43 pm on March 12th, 2011 Reply
            • Anonymous

              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.

              6:15 pm on March 13th, 2011
            • 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. :D

              12:51 pm on March 18th, 2011
            • Scott

              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.

              8:13 pm on March 14th, 2011

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

    search button search button
    rss