«

»

Video Tutorial: Creating a child theme in WordPress

WordPress GrapheneI have made another video tutorial, this time giving step-by-step instructions on how to create, and use, a child theme with wordpress. This video explains the technique using the Graphene theme version 1.5.2. Please get in the practice of using a child theme TODAY, as it will save you tons of time when a new version of your theme, or WordPress, rolls out.

In this video, I will show you how to:

  • Create your files
  • Upload them to your server
  • Activate your child theme
  • Make modifications to your css

There are many advantages when using a child theme with your graphene theme. Changes made are kept when installing an update. This means that you don’t have to remember all the custom changes you made when a new update rolls out, and replaces the parent themes style and functions files.

If you haven’t already, I highly recommend you creating a child theme immediately. Especially if you are making modifications to your Graphene core files.

Enjoy, and please comment. (you don’t even have to log in… shhhhhhh)

11 comments

Skip to comment form

  1. google

    Once you create your Expert Page, you can also begin networking with other Experts on. My OS is Windows,
    so I employ the Windows adaptation. It allows users to see all
    the daily changes in any security’s stock price without having to visit financial sites.

  2. Sy

    Hey Josh, great tutorial. I’ve got a question for you regarding action hook widget placement and spacing. I’m trying to edit the style.css like you showed on the above video, but I don’t think I have it correct. What I did was added a widget to the top bar area where the twitter and facebook icons are. I just added a text widget, but I can’t seem to get the padding or margins right. It only wants to put it at the very top of the page. I finally moved it using the the editor in my browser, then I copied and pasted the code into my style.css of my child theme, but nothing happened. The code I pasted was this
    element.style {
    padding-top: 17px;
    font: normal 20px Arial;
    }
    This worked in the browser window as I did it on the fly, but once copied into the css it didn’t work. Any ideas?
    Thanks a bunch for this great blog. It has really helped me fine tune my site!

    1. Josh Lobe

      Hi Sy,

      Well, the css you are using above is inline css, rather than stylesheet css. What this means is you are defining the styles inline for that element you are wanting to adjust.

      So, let’s say the element you want to adjust is a div tag. You are probably using something like <div style=”padding-top:17px;”>

      Instead, give the div a class in your editor. Something like <div class=”my_header_image”>

      Then in your child theme stylesheet, insert this:
      .my_header_image {
      padding-top:17px;
      }

      The class from your div will match the name in your stylesheet.

      1. Sy

        Worked like a charm! Thanks, Josh. If you ever venture up to Newport, I’ll buy you a beer.

  3. Wendy

    TY JOSH! Your tutorial really helped. I do so much better with visual aides. As a extremely new coder and site builder, I have been avoiding any work in my site. With the wonderful find of Graphene and your thoughtful aides, I am moving right along!

    Wendy

    1. Josh Lobe

      Thank you, Wendy. I certainly appreciate the kind words. Also, please feel free to use my contact form anytime you feel you need some pointers, advice, or whatever else!

      Good luck to you in your new endeavor!!

  4. Nancy

    I am new to WordPress and have been working on my site for a while with more questions than answers–it has been an interesting adventure. Thanks for your tutorials–they will be really helpful since I have been making changes in the parent and will need to do a lot of work to upgrade to the new version. Now I understand how to get “stuff” into those “nooks and crannys” (and keep the changes going). I now have the info to create that child.

    Thanks again and Happy New Year.

    Nancy

    1. Josh Lobe

      Thanks Nancy.

      Please feel free to contact me anytime if you need an explanation or just some advice on something. And you know… it’s just like the old saying goes… “The more you learn; the more you realize you don’t know”.

      I’ll be adding a few new videos tonight (mostly regarding my plugin); but follow my twitter or facebook if you would like to be notified of future video posts.

      Cheers!!

  5. dieter

    Great movie clips and lots of stuff to learn. Thanks for your time an effort to put this together. Helped me a lot in working on my WP sites.

    Keep up the good work and enjoy the upcoming christmas.

    Cheers Dieter

  6. Tani

    Hi,

    Thanks for the tutorial. When I follow your steps and activate the child theme in wordpress, the wordrpess dashboard dissapears and I have to delete the child theme folder from the ftp site before I can log back in to my wordpress account. When i type in my url in a webbrowser all i get is a blank screen.

    Hope you have some advice. Sorry, I am a bit of a novice.
    Thanks,
    Tani

    1. Josh Lobe

      Hi Tani,

      One mistake I made when creating this video is the functions.php file. It should look like this:

      < ?php
      ?>

      Try fixing that and see if your problem persists.

Leave a Reply

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

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>