WordPress: Change a theme appearance without touching core theme files.


How many times we have felt an itch to modify or tweak the appearance of a WordPress theme such as twentythirteen by just changing something in the core theme file.

However a big disadvantage of directly editing a core theme file is, in case a theme is updated in future (which will likely be the case), all our changes will be lost.

Hence changes should be done using the concept of ‘Child Theme’ of WordPress. With a child theme, we can update the parent theme (which might be important for security or functionality) and still keep our changes.

Following are the steps to keep the top menu bar fixed on top and stop the menu bar from scrolling up in twentythirteen theme using the concept of Child Theme:

  1. In wp-content/themes directory, create a new directory by the name ‘twentythirteen-child’. (In case twentythirteen theme needs to be changed).
  2. Inside directory twentythirteen-child, create a file by the name of ‘style.css’.
  3. Add the following code to the newly created style.css:
  4. /*
     Theme Name:     Twenty Thirteen Child
     Theme URI:      http://knowledge-share.in/twenty-thirteen-child/
     Description:    Twenty Thirteen Child Theme
     Author:         Shafi Memon
     Author URI:     http://knowledge-share.in
     Template:       twentythirteen
     Version:        1.0.0
    @import url("../twentythirteen/style.css");
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    .navbar {
    	position: fixed;
    	top: 0;
    	z-index: 2;
  5. Log in to site’s dashboard and go to Admin Panel -> Appearance -> Themes and activate ‘Twenty Thirteen Child’ theme.
  6. Go to Admin Panel -> Appearance -> Menus and check the checkbox ‘Navigation Menu’ to make sure that same menu bar is available which was set in the Parent twentythirteen theme. This is required because the menu bar of a parent theme (twentythirteen here) is not inherited in child theme (twentythirteen-child in this case) by default.

For further information on the concept of Child Themes of WordPress, refer http://codex.wordpress.org/Child_Themes