In order to implement customizations that exceed Hamburg’s theme options you should definitely consider setting up a Child Theme. Child Themes are a 100% secure WordPress core feature to add you own adjustments and extensions to your active theme—without risking to have them overridden with the next theme update!
Understanding Child Themes is very easy. Even without great HTML, CSS or PHP skills you can set up a Child Theme yourself, or have it set up for you by a WordPress freelancer.
Setting up a Child Theme for Hamburg
- Think of a namen for your Child Theme. Something like “Hamburg Child” will do.
- Create a new folder within your theme directory (usually located at wp-content/themes/) and name it after your Chid Theme, i.e. “hamburg-child”. (Lowercase letters, numbers, dashes and underscores are allowed.) Your new Child Theme folder should now be sitting on the same hierarchy level right next to your original “hamburg” theme folder.
- Copy all stylesheet files from folder hamburg into your Child Theme.
- Copy the sub-folder hamburg/assets/css into your Child Theme. (Please create the assets folder.)
- Open style.css, enter the name of your Child Theme and add a line to reference the hamburg folder as your Parent Theme:
1234/** Theme Name: Hamburg Child* Template: hamburg*/
- Create a new file named functions.php within your Child Theme folder.
- Copy the following code into your Child Theme’s functions.php:
12345678add_data( 'lte8', 'conditional', 'lte IE 8' );// Theme stylesheet.wp_enqueue_style('style',get_stylesheet_directory_uri() . '/style' . $woo . $suffix . '.css');}
From now on stylesheets from hamburg will be ignored and those from hamburg-child will be loaded. Go ahead and edit your Child Theme as you see fit! Modifications within the Child Theme folder are safe even when Hamburg, your Parent Theme, receives an update.
Heads up! There will only be one theme stylesheet loaded at a time.
In order to keep loading time short Hamburg by default loads the minified stylesheet files (style.min.css, style.plus.woo.min.css etc.). When you’re in a test environment you can use the “regular” CSS files by adding this line to your wp-config.php:
define( 'SCRIPT_DEBUG', true );
As soon as you want to load the minified stylesheet again, remove that line or set its value to false. Use a tool like YUI Compressor to minify your CSS.
Dependent on whether WooCommerce is active and with which browser a user enters your website stylesheets are going to be loaded in the following order:
- Internet Explorer 8:
- WooCommerce active: assets/css/style.plus.woo.ie.min.css
- WooCommerce not active: assets/css/style.ie.min.css
- Other browsers:
- WooCommerce active: style.plus.woo.min.css
- WooCommerce not active: style.min.css
Hamburg provides am “atomical” template structure that allows you to edit small portions of HTML and PHP by copying template part files over to your Child Theme.
Heads up! Always keep the folder structure of theme Hamburg in your Child Theme when copying files!
Example: Customize post title HTML
Copy parts/entry-header.php into parts/ in your Child Theme. (If a folder parts does not exist there yet, create it now.)
Open the file and change the h1 into an h2:
<a href="" title="" rel="bookmark">
Save the file and open a post in your browser. You should be able to verify your modification in source-code view.