• Creating a Child Theme for PressWork

    by  • August 1, 2011 • Documentation • 19 Comments

    When creating a site with PressWork, you might want to add some custom css on top of all the theme options that are available. The only problem with modifying any of the core theme files such as style.css is that when you upgrade, those modifications will be overwritten. That’s where a child theme comes in.

    A child theme is a “theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.” In layman’s terms, it’s a way you can modify a theme that will never be overwritten, since it is a totally new theme that only relies on core elements from the “parent” theme.

    Putting together a basic child theme really only requires one thing: a style.css file. A child theme has to be self-contained, so first you need to create a new folder. Call it presswork-child. In that folder, create a new file called style.css. The structure should look like this:

    The contents of presswork-child

    Now open up style.css and add this to the top:

    /*
    Theme Name:	PressWork - Child theme
    Theme URI:	http://presswork.me
    Description:	A basic child theme for PressWork
    Author:		c.bavota
    Author URI:	http://bavotasan.com/
    Template:	presswork
    Version:	0.1
    */

    The most important line is the Template: presswork. This lets WordPress know that this theme relies on PressWork. You need to always make sure that you are using the parent theme’s directory name. If you have changed the directory name to something like NewPressWork, then that line would have to read Template: NewPressWork.

    If you would upload your new child theme into WordPress and activate it, you would get a theme with no styles whatsoever. The thing about child themes, is that they totally overwrite the style.css of the parent theme, so if you have no CSS in your new style.css file, then your site will have no CSS whatsoever. A great way to load up the parent theme’s CSS is to use @import. Now your new style.css file should look like this:

    /*
    Theme Name:	PressWork - Child theme
    Theme URI:	http://presswork.me
    Description:	A basic child theme for PressWork
    Author:		c.bavota
    Author URI:	http://bavotasan.com/
    Template:	presswork
    Version:	0.1
    */
     
    @import url("../presswork/style.css");

    This will include the stylesheet from the parent theme’s directory. Now, if you activate your child theme, it should look identical to the parent theme.

    Any CSS you add will no longer be overwritten if the parent theme is updated. And, if the parent theme’s CSS changes, it will automatically be imported into your child theme’s CSS. So far so good, but what if you want to modify something in the single.php file? Simple, just copy over the file from the parent theme’s directory into your child theme’s directory. Modify to your heart’s content and your changes will be safe.

    This may seem like a bit of work just to change one or two things, but taking the extra time to create a child theme will end up saving you more time in the long run, since you will no longer have to redo all your changes each time you upgrade.

    Read more about child themes in the Codex at http://codex.wordpress.org/Child_Themes.

    This article was slightly modified from the original on http://bavotasan.com.

    About

    Senior Developer & Co-Founder of PressWork.

    http://bavotasan.com

    19 Responses to Creating a Child Theme for PressWork

    1. SenthilkumaranMuthuSri
      August 4, 2011 at 7:36 am

      How to install the presswork?

    2. PanjianomAdipratomo
      August 4, 2011 at 9:11 am

      Do I add my own function file or other php files on child themes?

    3. PanjianomAdipratomo
      August 4, 2011 at 9:12 am

      Can I add my own function file or other php files on child themes?

    4. RaghavendraKopalle
      August 8, 2011 at 5:58 am

      @SenthilkumaranMuthuSri Just install like any other wordpress theme

    5. RaghavendraKopalle
      August 8, 2011 at 7:23 am

      @SenthilkumaranMuthuSri For details refer this link http://codex.wordpress.org/Using_Themes#Adding_New_Themes

    6. digibomb
      August 8, 2011 at 11:35 am

      Yes. @PanjianomAdipratomo

    7. Pingback: Custom CSS and Custom Actions | PressWork

    8. Pingback: SNS Online | Blog | PressWork Releases First Premium Child Theme: InstaPress for Photo and Video Blogging

    9. enad
      August 18, 2011 at 8:27 am

      nice

    10. enad
      August 18, 2011 at 8:28 am

      gotta try this one out. planning to create a workpress child theme that looks similar to google plus interface.

      question: can i export my current settings for presswork? like i want to share with others the layout of my site.

    11. digibomb
      August 18, 2011 at 11:59 am

      Very cool theme idea, looking forward to seeing it :)

      Can you post your question in the support forum, thanks :) http://support.presswork.me@enad

    12. Pingback: How to add Twitter, Facebook, and Google+ to your PressWork theme | PressWork

    13. Pingback: Removing the Authorbox from Single Posts | PressWork

    14. Raf
      January 10, 2012 at 10:27 am

      I’ve found creating child themes for presswork is somewhat convoluted as template files such as single.php or page.php don’t exist. You only have a loop.php file that has a bunch of if statements and formats the post according to what “category” it’s in (in the code you’re using a function called pw_actionBlock).

      The actual rendering of the posts is up to action.php which contains functions like pw_posts_featured() and pw_posts(). After finally finding these functions, I had to wrap them with a:

      if(!function_exists(‘pw_posts’))

      To override them in my child theme and customize how I want my posts to be rendered.

      As a feature request for the next version of presswork, can you make these functions pluggable for child themes? :-) Or at the very least separate them out into explicit template files such as single.php, page.php, etc..

      Thanks!
      Raf

      • January 10, 2012 at 10:29 am

        Each element in PressWork is pluggable. Take a look at this: http://presswork.me/2011/custom-css-and-custom-actions/.

        Also, you can overwrite everything in PW by adding new page templates such as single.php to your child theme. PW is built so you can easily overwrite things.

      • Raf
        January 11, 2012 at 10:36 am

        Ok, that link definitely helps!

        Thanks!
        Rafi

    15. CHris
      February 23, 2012 at 8:32 am

      Totally lost.. Do I create the “presswork-child” folder in my presswork folder? Can I just copy and modify pressworks style.css and put THAT in my child theme folder??

    16. February 24, 2012 at 10:24 am

      @CHris You create your “presswork-child” folder at the same level as your “presswork” folder. Both folders go into the “Themes” directory of your WordPress installation. You don’t copy the pressworks style.css, that makes little sense, since you already “@import” that css file at the top of your own style.css in the presswork-child folder (see the tutorial above).

    17. July 11, 2012 at 11:26 pm

      Làm thế nào để cài đặt 1 presswork nhỉ? Help..!

    Leave a Reply

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