Tag Archives: twentythirteen

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

Greetngs,

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

Regards!

WordPress-3.6.1: Stop the top menu bar from scrolling up.

Greetings,

WordPress-3.6.1 comes with the most amazing theme called ‘twentythirteen’.

However considering user preferences, one enhancement that needs to be done is that the top menu bar should always remain visible regardless of the vertical scroll. This will make navigation much easier.

Hence position of menu bar should be fixed on top of page.

To achieve this, some changes are to be done in file ‘/wp-content/themes/twentythirteen/style.css’.

Following code:

.navbar {
    background-color: #f7f5e7;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
}

needs to be changed to:

.navbar {
    background-color: #f7f5e7;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
    /*Changed here*/
    position: fixed;
    top: 0;
    z-index: 2;
}

Catch / Caveat:

  1. Tweaks / Modifications are for ‘twentythirteen’ theme. However similar tweaks could be applied to any other theme such as ‘Spine’.
  2. One of the theme file is directly edited (might be considered as bad advice), so need to take care about the future updates to the theme file.
    [To achieve the same task without modifying the core theme file refer http://www.knowledge-share.in/wordpress-change-a-theme-appearance-without-touching-core-theme-files/
  3. Some difficulties might be faced when trying to view the top menu bar during admin tasks. (i.e. When admin is logged in.)

 

Thanks!