Theme documentation

Hannah: The Premium WordPress Theme by Creative Dive.


Visit the live demo Purchase now - 79$
Martin Jost

Hey, I'm Martin from Creative Dive.

Thank's for purchasing the theme. Do you like it? Please note: Don't forget to rate for the theme at themeforest.net. This help us to create new features and spend more time for developing to optimize it.
  1. Frequently Asked Questions

    1. How I can add a latest blog posts page with header?
    2. How I can add a content grid with custom amount of columns?
    3. How I can hide or show the sidebar?
    4. How I can add shortcodes to posts or pages?
    5. How I can show a post carousel / slideshow?
    6. How I can show a content header slideshow?
    7. How I can add custom web fonts?
  2. Installation

    1. First unzip the downloaded package.
    2. Search the files „theme.zip“ and „theme-child.zip“, which are included in the package.
    3. It’s recommend to upload both of the themes.

      There are two ways to upload and install the theme:

      1. Unzip both files and upload the folders via FTP in the „themes“ folder of your WordPress installation.
      2. Or go to your WordPress backend and upload both zip files at „Appearance > Themes“ and click „Add New“ and choose the zip files.
    4. If the upload is finished, you have to activate the child theme.
    Info: If you work with the child theme, you can customize the stylesheet or add own functions. So you don’t get any issues with upcoming theme updates.
  3. Installation of required plugins

    The plugin notification shows the required or recommended plugins for this theme. Now have to install all of them.
    1. Click the „Begin installing plugins“ link to install all required plugins. Advanced Custom Fields PRO: This plugin is included in the theme package and is automatically activated by theme activation.
      It's required for theme functionality!
      Get more info about the update notice.

      Hannah CD Helper: This plugin is included in the theme package and is automatically activated by theme activation.
      It's required for theme functionality!

      WP Admin Theme CD: This is a recommended plugin. Designed for all the people, who loves to create websites with WordPress. A clean, beautiful and modern admin theme.

      WooCommerce: This is a recommended plugin. It is required to use the shop functionalities of this theme.

      Contact Form 7: This is a recommended plugin. It is required to use of the contact and event registration template or for any form functionalities.

      MailChimp for WordPress: This is a recommended plugin. It is required to use of the newsletter widget and content section or for any MailChimp form functionalities.
  4. Import Demo Data

    The best and fastest way to understand the theme logic, is to import the demo data.
    1. Download and install the One Click Demo Import plugin, before you import the theme demo data.
    2. Go to „Appearance > Import Demo Data“, then go to the section „Choose a XML file for content import“ and click on the „file upload button“.
    3. Here you can upload the „demo-data.xml“ from the downloaded theme package. Click on „Choose file“ and browse to the xml file.
    4. Click on the button „Import Demo Data“ and work with all the content from the live demo.
    Notice: The WordPress own import plugin is not recommended to import the theme demo data!
  5. Frist steps to setup your theme

    If you use demo import

    1. Go to „Settings > Reading > Front page displays“ and select „A static page“ and choose „Home“ as the Front page.
      Notice: If you want to show the blog or landingpage as your front page, select it in the dropdown.
    2. Go to „Appearance > Menus“, click to the „Manage Locations“ tab and define the menu positions. Select „Footer Menu“ for the theme location „Footer Menu“ and „Main Menu“ for the theme location „Primary Menu“ and save your changes. Get more information: Official WordPress guide on navigation menus
    3. Go to „Settings > Permalinks“ and select the „Post name“ radio button below the common settings and save your changes.
    4. Go to „Theme Settings“ and setup the theme.
    5. Now your new WordPress site looks nice and you can start with the setup of all other settings like add new pages or posts.

    Without demo import

    1. Creating a blog page: Go to „Pages“ at WordPress backend and click „Add new“ > define the template „Filter Page“ and name the page „Blog“
    2. Creating a static homepage: Go to „Pages“ at WordPress backend and click „Add new“ > define the template „Default Page“ and name the page „Home“
    3. Go to „Settings > Reading > Front page displays“ and select „A static page“ and choose „Home“ or „Blog“ as the Front page.
      Notice: If you want to show the blog or landingpage as your front page, select it in the dropdown.
    4. Go to „Appearance > Menus“, click to the „Manage Locations“ tab and define the menu positions. Select „Footer Menu“ for the theme location „Footer Menu“ and „Main Menu“ for the theme location „Primary Menu“ and save your changes. Get more information: Official WordPress guide on navigation menus
    5. Add your new menu items to create the „Main Menu“ or „Footer Menu“, e.g. „Home“ for the first menu item as a part of the „Main Menü“ and save your changes.
    6. Go to „Settings > Permalinks“ and select the „Post name“ radio button below the common settings and save your changes.
    7. Go to „Theme Settings“ and setup the theme.
    8. Now your new WordPress site looks nice and you can start with the setup of all other settings like add new pages or posts.
  6. The Theme logic

    Top Layer
    TopBar
    Menu | Breadcrumb | Social Icons
    Menu
    Logo | Main Menu | Shop Basket | Global Search
    Header
    Static Content | Carousel
    Leading Area
    Carousel | Content Grid | Promo Boxes | Custom HTML
    Content
    Sidebar
    Ending Area
    Carousel | Content Grid | Promo Boxes | Custom HTML
    Footerbar Full-Size (top)
    Footerbar
    Widgets
    Widgets
    Widgets
    Footerbar Full-Size (bottom)
    Footer
  7. Theme Options - Gerneral

    Setup your theme on the theme settings page. Here you can find many customiziable configurations for the theme.
    1. Go to „Theme Settings > Gerneral“, to hide some features or add your analytics code.
  8. Colors & Design

    Setup your theme on the theme settings page. Here you can find many customiziable design configurations for the theme.
    1. Go to „Theme Settings > Colors & Design > Logo“, to add your own logos.
    2. Go to „Theme Settings > Colors & Design > Colors“, to change the theme color settings.
    3. Go to „Theme Settings > Colors & Design > Icons“, to add own favicon and iOS app icons.
    4. Go to „Theme Settings > Colors & Design > Background“, to add or change the background image of the theme.
  9. Blog List

    Setup the default blog list style view for your posts at latest posts, archive or taxonomy pages like categories or tags.
    1. Go to „Theme Settings > Blog List > Layout“, to change the blog list style view settings.
  10. Posts

    Setup the view for a single post page.
    1. Go to „Theme Settings > Posts“, to change the view of your post pages.
  11. Sidebars

    Setup the visibility, direction of the sidebar or add more than one multiple sidebars.
    1. Go to „Theme Settings > Sidebars“, to hide the sidebar or change the direction from right to left.
    How I can change the sidebar settings for a specific post or page?
    ... coming soon ...
  12. Social

    Here you can find customiziable social configurations for the theme.
    1. Go to „Theme Settings > Social“, ton hide some social features.
    2. Go to „Theme Settings > Social > Your social profiles“, to add your own social profiles.
  13. Web Fonts

    Add custom Google web fonts or activate Adobe Typekit fonts.
    1. Go to „Theme Settings > Web Fonts > Define Theme Fonts“, to add new Google web fonts or activate Adobe Typekit fonts.
    2. Go to „Theme Settings > Web Fonts > Google Web Fonts“, to add custom Google web fonts.
    3. Go to „Theme Settings > Web Fonts > Typekit Web Fonts“, to activate Adobe Typekit fonts.
  14. Top Layer

    Add custom top layers for specific or all pages and show notifications or embed a subscription form.
    1. Go to „Theme Settings > Top Layer“, to add custom top layers.
  15. Topbar

    Add the topbar and show a secondary menu, breadcrumb menu or social profile icons.
    1. Go to „Theme Settings > Topbar“, to activate and setup them.
  16. Leading Area

    Add custom leading areas for specific or all pages and show notifications, a content grid, post type carousel, promo boxes or custom html.
    1. Go to „Theme Settings > Leading Area“, to activate and setup this area.
  17. Ending Area

    Add custom ending areas for specific or all pages and show notifications, a content grid, post type carousel, promo boxes or custom html.
    1. Go to „Theme Settings > Ending Area“, to activate and setup this area.
  18. Google Maps

    Add custom Google Maps locations to your pages.
    1. Go to „Theme Settings > Google Maps“, to add your own locations and display it on specific pages.
  19. PopUp Layer

    Go to „Theme Settings > PopUp Layer“ and click on the button „Add a layer“. You can insert a title, an unique ID (e.g. request) and your content (e.g. a contact form).

    How I can call the popup layer on my site?

    1. You can create a link included in a page or post content, which call the ID from a specific layer.
      
      <a href="#request">Linktext</a>
      
    2. You can add the button „PopUp Layer“, which is included in some content sections. Enter the specific ID in the button field.
    3. You can add a button via shortcode included in a page or post content, which call the ID from a specific layer.
      
      [button link="#request"]Linktext[/button]
      
  20. Templates

    Many templates are included in the theme. Read more about the specific template features.

    How I can add pages selected by templates?

    1. Go to „Pages > Add new“ and find the "Page Attributes" box to select your template for a specific page.
  21. Categories Page

    Create a page for displaying all or specific categories with their thumbnails.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Categories“. Look for an example in the live demo.
  22. Tags Page

    Create a page for displaying all or specific tags with their thumbnails.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Tags“. Look for an example in the live demo.
  23. Glossary Page

    Create a alphabetical sorted glossary page for displaying all or specific posts with their thumbnails.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Glossary“. Look for an example in the live demo.
  24. Sitemap Page

    Create a user sitemap page for displaying all pages, posts and more.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Sitemap“. Look for an example in the live demo.
  25. Contact Page

    Add google maps, contact form 7 and contact persons to the page.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Contact“. Look for an example in the live demo.
  26. Filter Page

    Filter your posts by taxonomies. Show all or specific posts only.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Filter Page“. Look for an example in the live demo.
  27. Default Page

    Select from many content sections and build a page with e.g. prices, reviews, features sections and many more.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Default Template“. Look for an example in the live demo.

    How I can hide or move the default content area and title of this site?

    1. Look at the left side and click on „Sections".
    2. Add the „WP Content" section.
    3. Activate the „Page Content Section" to show this area as a part of the sections. Now you can move this area via drag & drop.
    4. Activate „Hide WP Content" to hide this section completely.
  28. Landingpage

    The landingpage have an own separated scrollmenu, which can linked to specific content sections. Select from many content sections and build a page with e.g. prices, reviews, features sections and many more.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Landingpage“. Look for an example in the live demo.

      How I can link a scrollmenu item with a content section?

      1. Each content section have an own ID (Link to) + a consecutive number (Number). With the ecxeption of "header" and "contact". The number is depends from the order of the content sections. You can see the number in the source code.

        Look at this example from the source code excerpt.
        
        <section class="logos text-center" id="logos_1"> ... </section> // logo section (count is 1)
        <section class="features-1 text-center" id="features-1_2"> ... </section> // features-1 section (count is 2)
        <section class="prices text-center" id="prices_3"> ... </section> // prices section (count is 3)
        	. // a other section (count is 4)
        	. // a other section (count is 5)
        	. // a other section (count is 6)
        <section class="banner text-center" id="banner_7"> ... </section> // banner section (count is 7)
        
        Another example, only with words.
        
        // my first selected section is „Logos“ > The section name is = logos / The section count is = 1
        // my second selected section is „Banner“ > The section name is = banner / The section count is = 2
        // my third selected section is „Logos“ > The section name is = logos / The section count is = 3
        ... and so on
        
      2. You can see it in the example above. The number is depends from the order of the section.
      3. Now you must connect the menu item with the right section ID and number. If you click the menu item, the page scrolls the these content section.
      4. Go to the „Scrollmenu“ tab and add new menu items, then you can select the section name and ID.
      Info: If you change the order of the sections later, you have to change also the number of the menu item.
  29. FAQ Page

    Show popular questions and answer it for your users.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „FAQ Page“. Look for an example in the live demo.
  30. Tabbed Page

    Show your website content separated in different tab sections. Select the left or right direction of the menu.
    1. Go to „Pages > Add new“, find the "Page Attributes" box and select the template „Tabbed Page“. Look for an example in the live demo.
  31. Content Sections

    If you use the page „default template“, you can add very useful content sections to your site.
    1. Go to „Pages“ an click „Add new“. Make sure, that the „default template“ is selected. Look for the tab named „Sections“ and lick on the button „Add Content Section“. Select any section to including on the page. You can use different sections together and sort it via drag and drop.
  32. Button Select

    In some sections you can add buttons via the option panel. All you have to know about it, is this:
    1. Page: Select an existing page from dropdown menu.
    2. Post: Select an existing post from dropdown menu
    3. URL: Enter an external URL, which you want to link.
    4. PopUp Video: Enter a YouTube or Vimeo embed URL to the field.
      e.g. YouTube: „http://www.youtube.com/watch?v=7HKoqNJtMTQ“ or Vimeo: „http://vimeo.com/123123“
    5. PopUp Map: Enter a Google Maps embed URL to the field.
      e.g. „https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom“
    6. PopUp Layer: Enter the ID (e.g. „request“) from an existing PopUp Layer, which is managed by „Theme Settings > PopUp Layer“.
    7. Anchor Link: Enter the ID (e.g. „logos_1“) from a content section. When you clicks the link, the site scrolls to the content section at same site.
  33. Sidebar & Widgets

    You can add widgets in two different locations. There are the sidebar and the footerbar.

    Where I can manage the widgets?

    1. Go to „Appearance > Widgets“, there you can find five different widget areas. Each area have specific widgets.
    2. Drag the widgets to the area where they should be displayed.

    Which widgets I can add?

    1. Comments Widget: Show the recent user comment. Manage the content length, avatar size and number of comments.
    2. Recent / Popular Posts Widget: Show recent or popular posts. Manage the type or number of posts.
    3. Instagram Widget: Show the last photos from your Instagram profile. Manage the number of photos.
    4. About Author Widget: Tell something about you and your blog. Manage the photo, title and text.
    5. Social Widget: Add your social networks. Manage it on „Theme Settings > Social“.
    6. Newsletter Widget: Add a subcription form to the sidear. Use the ID from the MailChimp plugin form. Manage the form ID and the two text lines.
    7. Categories Widget: Add a list of all or specific categories. Manage the thumbnails, post count or exclude specific categories.
    8. Recent / Popular Pages Widget: Show recent or popular pages. Manage the type or the number of pages.
  34. Shortcodes

    Shortcodes are the easily way to add buttons, videos, tab menus or otherwise to your content without html knowledge.

    How I can add shortcodes to posts or pages?

    1. Button:
      
      [button link="http://www.google.com"]Google[/button]
      
    2. Unordered List:
      
      [ulist]
      	<ul>
      		<li>Your list element</li>
      		<li>Your list element 2</li>
      		<li>Your list element 3</li>
      	</ul>
      [/ulist]
      
      Use custom font awesome icons for unordered list elements.
      
      [ulist icon="fa-phone"]
      	<ul>
      		<li>Your list element</li>
      		<li>Your list element 2</li>
      		<li>Your list element 3</li>
      	</ul>
      [/ulist]
      
    3. Ordered List:
      
      [olist]
      	<ol>
      		<li>Your list element</li>
      		<li>Your list element 2</li>
      		<li>Your list element 3</li>
      	</ol>
      [/olist]
      
    4. Tab Menu:
      
      [tabmenu] 
      	[tab]tab item 1[/tab]
      	[tab]tab item 2[/tab]
      [/tabmenu] 
      
      [tab-content]
      	[tab-pane]The content of tab item 1.[/tab-pane]
      	[tab-pane]The content of tab item 2.[/tab-pane]
      [/tab-content]
      
    5. Accordion:
      
      [acc]
      	[acc-item item="accordion item 1"]The content of tab item 1.[/acc-item]
      	[acc-item item="accordion item 2"]The content of tab item 2.[/acc-item]
      [/acc]
      
    6. Video Embed - YouTube: Use the string after https://www.youtube.com/embed/ [ ... ] e.g. "QoY77paKjLY".
      
      [video type="youtube" link="QoY77paKjLY"][/video]
      
    7. Video Embed - Vimeo: Use the string after https://player.vimeo.com/video/ [ ... ] e.g. "183560799".
      
      [video type="vimeo" link="183560799"][/video]
      
    8. Icons: Use icons from Font Awesome. Define the icon and size. Find all icons here.
      
      [icon type="fa-search" size="2"][/icon]
      
    9. Alert Box: Use four different alert boxes.
      
      [alert type="success"]Well done! You successfully read this important alert message.[/alert]
      
      
      [alert type="info"]Heads up! This alert needs your attention, but it’s not super important.[/alert]
      
      
      [alert type="warning"]Warning! Better check yourself, you’re not looking too good.[/alert]
      
      
      [alert type="danger"]Oh snap! Change a few things up and try submitting again.[/alert]
      
    10. Dropcap: Show the first letter of your post as initial.
      
      [dropcap]Y[/dropcap]our text ...
      
    11. Lead-In: Use three kinds of the lead-in content banner.
      
      [leadin align="left"]Create your blog and share your voice.[/leadin]
      
      
      [leadin align="right"]Create your blog and share your voice.[/leadin]
      
      
      [leadin align="full"]Create your blog and share your voice.[/leadin]
      
    12. Columns: Use three kinds of content columns.
      
      [column]
      	[col size="2"]Column 1[/col]
      	[col size="2"]Column 2[/col]
      [/column]
      
      
      [column]
      	[col size="3"]Column 1[/col]
      	[col size="3"]Column 2[/col]
      	[col size="3"]Column 3[/col]
      [/column]
      
      
      [column]
      	[col size="4"]Column 1[/col]
      	[col size="4"]Column 2[/col]
      	[col size="4"]Column 3[/col]
      	[col size="4"]Column 4[/col]
      [/column]
      
    13. Divider: Use four kinds of the content devider.
      
      [divider type="solid"][/divider]
      
      
      [divider type="dotted"][/divider]
      
      
      [divider type="dashed"][/divider]
      
      
      [divider type="double"][/divider]
      
      
      [divider type="solid"]A top and bottom divider for content inside the shortcode.[/divider]
      
    14. Highlighted Text:
      
      [mark]Highlighted Text[/mark]
      
    15. Post Listing: Add a post listing into to content to show recent or selected posts.
      
      [post-list count="3" column="none"][/post-list]
      
      Show recent posts in different count of columns (1, 2, 3 or 4 columns):
      
      [post-list count="3" column="1"][/post-list]
      
      Show selected posts by adding the specific post id:
      
      [post-list count="3" column="4" post_ids="666,2008"][/post-list]
      
      Show selected pages by adding the specific post type:
      
      [post-list count="3" column="4" type="page"][/post-list]
      
    16. Google Maps:

      Add custom Google Maps locations to the content. It's important to know, if you change the width or height of the container, please use "%" or "px" after the number.
      
      [maps width="100%" height="350px" link="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d453478.8144488746!2d152.71233137091994!3d-27.38185974480549!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1484508882042"] [/maps]
      
      How I get the map source? For Google Maps embed, go to google.de/maps/. Click on „Share and embed the map“ and copy the src from the iframe.
    17. Toggle Menu:

      Separate your content in collapsed areas.
      
      [toggle]
      [toggle-item item="Your item title 1"] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/toggle-item]
      [toggle-item item="Your item title 2"] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/toggle-item]
      [/toggle]
      
      How I can disable the collapsed areas for specific items? You can use the attripute collapse="no".
      
      [toggle]
      [toggle-item item="Your item title" collapse="no"] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/toggle-item]
      [/toggle]
      
  35. Plugins

    The following plugins are required for the full theme compatibility.
  36. Contact Form 7

    If you have used the demo import, all sample forms are already created. Otherwise add new ones.
    1. For more explanations about the plugin look at the documentation.
    2. For using contact form 7 with this theme, it's required to write a div container „<div class="form-field">“ around each field like in this example:
      
      <div class="form-field">
      <label> First name (*)
      	[text* your-name] 
      </label>
      </div>
      
      <div class="form-field">
      <label> Surname (*)
      	[text* your-subname] 
      </label>
      </div>
      
    3. For using two column fields, we need extra classes „formhalf-1“ and „formhalf-2“ for the container outside the label like this example:
      
      <div class="form-field formhalf-1">
      <label> First name (*)
      	[text* your-name] 
      </label>
      </div>
      
      <div class="form-field formhalf-2">
      <label> Surname (*)
      	[text* your-subname] 
      </label>
      </div>
      
    4. How I can include a form to the content? You can add forms via shortcode to your pages, posts or popup layers. Look at this example:
      
      [contact-form-7 id="872"]
      
  37. MailChimp for WordPress

    If you used the demo data import, a sample form is already created. Otherwise add a new.
    1. For more explanations about the plugin, look at the documentation.
    2. But first, you have to insert the api key for using the plugin. You need a mailchimp account to continue. Sign up and create a newsletter list.
    3. After this you can enter your API key and connect the plugin with your MailChimp Account.
    4. Now you can add a subscription form. Go to „MailChimp for WP - Forms" and insert the following code in the textarea.
      
      <input type="email" name="EMAIL" placeholder="Your e-mail address" required />
      <input type="submit" value="Subscribe" />
      
    5. To publish the form, you can use the newsletter content section or the newsletter widget by inserting the MailChimp form ID.
      
      [mc4wp_form id="289"]
      
  38. Advanced Custom Fields PRO

    The Advanced custom fields pro is not a free plugin. Normally you must purchase this plugin. But in combination with the this premium theme, you get it for free. The only disadvantage is, you don't have an own license key. So you can not update this plugin manually. You get the newest version of Advanced custom fields pro with the upcoming theme updates only. Of course feel free to purchase the plugin.

    Why the ACF field settings are hidden in the child theme?

    1. In the child theme you get the fields, which are required for this theme via PHP exported file. This ensures, that the theme remains updateable.
    2. If you want to customize or extend the existing fields, you lose the possibility to update the theme. Because errors could occur after the update.

    Disable the update notification

    If you use the child theme, you can disable the update notification. Following the instructions to disable the notification.
    1. Go to the theme files and open the „functions.php“ of your child theme. Here you can remove the following comment out lines and save the file on your server.
      
      /*****************************************************************/
      /* DISABLE PLUGIN UPDATE NOTIFICATIONS */
      /*****************************************************************/
      
      // --> remove the comment out for disable the ACF update notification
      
      /*
      
      function filter_plugin_updates( $value ) { unset( $value->response['advanced-custom-fields-pro/acf.php'] ); return $value; }
      add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );
      
      */
      
    2. After saving you'll see no more update notification of this plugin.

    How I can update ACF Pro plugin?

    1. The latest version of the ACF plugin is included in the theme update package. If you have an older version of the ACF Pro and it asks for a licence code to update itself, ignore it, delete the plugin and install it again either by following the notification on the top of the wp admin or install it manually. You can find the ACF PRO plugin via FTP at "..wp-content/themes/hannah-cd/inc/plugins/advanced-custom-fields-pro.zip".

    The easiest way to update the ACF Pro plugin

    1. If you have upload the latest theme version, you get the newest version of ACF PRO, which is included in the theme package. Now, let's update the plugin. Go to „Plugins“ and click on „Deactivate“ and then delete it. After deleting the plugin, follow the upper update notice and install the latest plugin version again. That's it!
    More about the ACF PRO plugin rules.
  39. Hannah CD Helper

    With these theme required plugin, you get all included shortcodes and the database installation of the star rating function of the theme. So it's important to update the plugin always to the newest available version.

    How I can update Hannah CD Helper plugin?

    1. The latest version of the plugin is included in the theme update package. To install the newst version, you have to following the notification on the top of the wp admin and begin to update the plugin.
    2. Alternatively: You can also update the plugin manually. So delete the old version in you theme plugin folder and upload the new. You can find the newest version of the plugin via FTP at "..wp-content/themes/hannah-cd/inc/plugins/hannah-cd-helper.zip".
  40. Translation in your language

    If you want to change the language of the theme files, you can do it. The theme is ready for translation.

    How I can translate the theme?

    1. In the „language“ folder of the main theme, you can find the „hannah-cd.pot“ file with all text variables.
    2. Use the tool „Poedit“ to add another language. With this tool you can load the POT file to create two files, which that are important for your new language. These are the .PO and .MO files. The german language files are already included.
    3. Save the translated files to the right WP locale name, e.g. if you are translating to French you have to use the filename „fr_FR.po“. A full list of WP locales you can find here.
    4. If you have created the new language files, upload them to your „languagechild theme folder.
    5. After uploading you can switch the language settings in your WordPress backend „Settings > General > Site Language“.
    Find more information about Poedit.
  41. Updating the theme

    If a new version of the theme is available, you can make an update to transfer all the new changes to your old theme files.

    Back Up your theme files

    1. The first thing you should do, is to back up the old theme files. After the update, all old files are overwritten. This is the best way to undo things, if an error occurs.
    2. A nice plugin is „BackWPup“ to back up your theme files and database without copy them manually from your server and MySQL database.

    Uploading and replacing an existing theme

    1. It is required, to upload a new version of the theme manually and replace an the older version in order to upgrade it.
    2. Login to your site via FTP, navigate to „../wp-content/themes/“, delete the old theme and upload the new version. Make sure you create a backup of the old version from your theme just in case something goes wrong.
    3. An alternative method, if you don't want to delete the old theme directly, is to rename the folder from „hannah-cd“ to „_hannah-cd“. After renaming your old theme, you can upload the new.

      Warning: Never delete or override the child theme! The child theme contains own customizations, which you should not delete or overwrite.
    4. Now you can work with the currently version of the theme.

    Why you should using the child theme?

    With an update it could be, that some fields from the theme backend are updated. For this to work, you should use the child theme.

    Info: You can see the admin menu „Custom Fields“ only, if you have activated the main theme. Just change something here, if you know what you're doing. The fields are the core of the theme functionality!
    1. If you are using not the child theme, the new fields will not update automaticlly. So there is an other way to get the new required fields.
      Warning: In the child theme you get the fields, which are required for this theme via PHP exported file. This ensures, that the theme remains updateable. If you want to customize or extend the existing fields, you lose the possibility to update the theme! Because errors could occur after the update.
    2. Go to „Custom Fields > Field Groups“. There you have to look for „Sync available“.
    3. If you can see the „Sync available“ link, click on it and synchronize the new fields manually.
  42. Some issues

    Maybe the following points will help you with some issues.

    Javascript and Iframes will be removed from the fields after saving

    1. For security reasons, HTML tags, Javascript, CSS, or iframes are usually removed after entering and saving our custom fields.
    2. But there is a way to allow all of this! Now I will describe you, how you can add HTML tags, Javascript, CSS, or iframes in our custom fields.

      First make sure you use the child theme as your activated WordPress theme.
    3. Go to the theme files and open the „functions.php“ of your child theme. Here you can remove the following comment out lines and save the file on your server.
      
      /*****************************************************************/
      /* DISABLE REMOVING OF SCRIPT TAGS IN CUSTOM FIELDS */
      /*****************************************************************/
      
      // --> remove the comment out for disable the removing of script tags in custom fields
      
      /*
      
      function hannah_cd_acf_kses_post( $value ) {        
          return $value;
      }
      
      */
      
    4. After saving this file you can add content, which was stripping out before.

    php-mbstring must be activated: Posts are not displayed or some content is broken

    1. In rare cases, users may have trouble viewing some sections of the theme if they host it on their own server or vserver with their own configuration.
    2. So far, this solution has helped in all cases. The theme is using the PHP function mb_strimwidth(); to shorten title or text to a specific characters limit.

      Solution: The mbstring extension is missing. Please check your PHP configuration and install php-mbstring.
    3. How you can install and activate php-mbstring it's depends from your server environment.

      Example to install php-mbstring and restart Apache web server on Debian / Ubuntu Linux:
      
      sudo apt-get install php-mbstring
      sudo service apache restart
      
      Maybe this is helping you: How to install php-mbstring?
      
  43. Photo licenses

    The theme demo data includes photos from stockphoto platforms like fotolia or istockphoto.

    Warning: Photos, which are included in the demo data are not part of the theme! You need a license to use these photos on your website. If you want to purchase these photos, you can find the links to every photo in the imprit of this theme.
  44. Credits

  45. Requirements

    • WordPress version 4.1 or greater
    • PHP version 5.6 or greater
    • MySQL version 5.6 or greater