• How to add Custom CSS?

  Creating a Custom CSS code is quite straightforward as long as you are familiar with the basics of HTML and CSS. You can easily add your Custom CSS using the Customizer. Go to Appearance Customize Additional CSS. Add your code there. Click on Publish. If you want a detailed description of adding custom CSS, you can refer to this link: Creating your own custom CSS via Inspect Element (https://docs.themegrill.com/knowledgebase/creating-your-own-custom-css-via-inspeFew readers

• How to add custom code to the theme using Child Theme?

  If you want to add your own code to the theme, then the best way is to use a Child Theme. Using Child Theme Child themes are a safe way to modify WordPress themes where you don't make any changes to the parent theme’s files. When the parent theme gets updated, the changes made in the Child theme are preserved and applied to the updated version as well. This is why Child themes are the best way to make changes to an existing theme. Rather than modifying theme files directly, you canPopular

• Available Hooks in Zakra Theme

  Hooks allow you to add extra functionality inside the theme. Using hooks, you will be able to change or add code without having to edit the core files. There are two types of hook: actions and filters. Action Hooks allow you to insert custom code and add new functionality. Filter Hooks allow you to modify code. Zakra provides you various hooks that allow you to add your custom code at various parts of the theme. A list of Hooks available in Zakra are shown below: Action HFew readers

• How to use Hooks in Zakra Theme?

  You can use hooks to add functionality to the Zakra theme. To add your custom code, you can use an action hook, and to modify any code, you can use a filter hook. Zakra provides you with various hooks. To see all of them, you can visit here. Using Action hook:Few readers

• Examples of usage of Hooks in the Zakra Theme

  You can use hooks to add your custom code to the theme. Few examples of usage of hooks are as follows: To remove Footer Bottom Bar completely using Action Hook: In the Pro version of Zakra, you can enable or disable the Footer Bottom Bar. If you want to remove the Footer Bottom Bar in the free version, however, you can do so using code given below:Few readers

• Action Hook: zakra_action_doctype

  It appears at the very beginning of the site. It is for declaring doctype and language attributes.Few readers

• Action Hook: zakra_action_head

  It appears on the Header of the site. It is for declaring the HTML head.Few readers

• Action Hook: zakra_action_before

  Elements like .page and .skip-link are hooked into this hook.Few readers

• Action Hook: zakra_action_before_header

  It appears just before <header>. The transparent header is also hooked into this hook.Few readers

• Action Hook: zakra_action_header_top

  All the Header Top Bar elements and contents are hooked into this hook.Few readers

• Action Hook: zakra_action_header_top_left_content

  It appears after .tg-header-top-left-content. The content set as the Left Content on the Header Top Bar is hooked into this hook.Few readers

• Action Hook: zakra_action_header_top_right_content

  It appears after .tg-header-top-right-content. The content set as the Right Content on the Header Top Bar is hooked into this hook.Few readers

• Action Hook: zakra_action_before_header_main

  It appears just before the Header Main Area section. An element like .tg-site-header-bottom is hooked into this hook.Few readers

• Action Hook: zakra_action_header_main

  All the Header Main Area elements like .site-branding, site-navigation, .header-action etc are hooked here.Few readers

• Action Hook: zakra_action_after_header_main

  It appears just after the Header Main Area i.e. at the end of the Header Main Area section.Few readers

• Action Hook: zakra_before_page_header

  It adds any content just before the Page Header section. It appears just before the .tg-page-header element.Few readers

• Action Hook: zakra_action_after_header

  It appears at the end of the Header section. Elements like </headerand Header Media are hooked into this hook.Few readers

• Action Hook: zakra_action_breadcrumbs

  The Breadcrumbs of the Page Header are hooked into this hook.Few readers

• Action Hook: zakra_after_page_header

  It adds any content just after the Page Header section. It appears just after the closing of .tg-page-header element.Few readers

• Action Hook: zakra_action_before_content

  It appears just before the content section. Elements like Page header, main and content are hooked into this hook.Few readers

• Action Hook: zakra_action_entry_content

  Blog contents are hooked into this hook. It appears in the content section of a site.Few readers

• Action Hook: zakra_action_after_content

  It appears at the end of the content section. It includes the closing of content and main element.Few readers

• Action Hook: zakra_action_before_footer

  It appears at the beginning of the <footersection.Few readers

• Action Hook: zakra_action_footer_widgets

  It appears at the Footer Widgets area. The .tg-site-footer-widgets element is hooked into this hook.Few readers

• Action Hook: zakra_action_footer_bottom_bar

  It appears on the Footer Bottom Bar section. The .tg-site-footer-bar element is hooked into this hook.Few readers

• Action Hook: zakra_action_footer_bottom_bar_one

  It appears in the first section of the Footer Bottom Bar. It appears just after the .tg-site-footer-section-1 element.Few readers

• Action Hook: zakra_action_footer_bottom_bar_two

  It appears in the second section of the Footer Bottom Bar. It appears just after the .tg-site-footer-section-2 element.Few readers

• Action Hook: zakra_action_after_footer

  It appears at the closing of the Footer section. It includes the </footerelement.Few readers

• Action Hook: zakra_action_after

  In this hook, elements like tg-scroll-to-top, and mobile-navigation are hooked.Few readers

• Action Hook: zakra_after_posts_the_loop

  It appears just after the Post Section of the Blog page. Post navigation is hooked into this hook.Few readers

• Action Hook: zakra_before_single_post

  It adds custom content before the Single Post content and after the post element.Few readers

• Action Hook: zakra_after_single_post

  It adds custom content after the Single Post content. It appears just before </article>.Few readers

• Action Hook: zakra_after_single_post_content

  It appears just after the Post Section of a single page. Post Navigation for a single post is hooked into this hook.Few readers

• Action Hook: zakra_post_readmore

  The Read More tag is hooked into this hook. It appears after the .tg-read-more element.Few readers

• Action Hook: Page Settings

  There are some Phooks provided by Zakra that will help you add the required code on the Page Settings. Here is the list of hooks: zakrageneralpagesetting : It appears on the General section of the Page Settings. zakratransparentheaderpagesetting: It appears just after the Transparent Header of the Header section of Page Settings. zakraheaderpagesetting: It adds your code on the Header section of the Page Settings. zakraprimaryFew readers

• Action Hook: zakra_entry_meta_end

  It adds content at the end of the Meta Area of the blog i.e. just before the closing of the .entry-meta element.Few readers

• Filter Hook: zakra_header_top_enabled

  It alters the visibility of the Header Top Bar of your pages. Zakra provides you with the option to enable or disable the Header Top Bar using the Customizer. However, you might also want to show or hide the Header Top Bar on a specific page. This can be easily achieved using the Page Settings in the Pro version. For the free version, you can use the zakraheadertopenabled hook instead. Example of this hook: To display header top bar on the front page only:Few readers

• FIlter Hook: zakra_header_top_class

  It adds CSS classes into the header top bar. You can use this filter if you want to add your custom CSS classes into header top bar.Few readers

• Filter Hook: zakra_header_transparency_filter

  It is used to make the header of your page transparent. Zakra provides you with the option to enable or disable the transparent header using Page Settings in the free version. In the Pro version, this feature is available in both, the Customizer and the Page Settings. Thus, the zakraheadertransparencyfilter hook is useful if you want to make the header of all of your pages transparent in the free version of the theme. Example of using this hook: To make header of all of the pageFew readers

• Filter Hook: zakra_header_class

  It adds CSS classes into the header. You can use this filter hook if you want to add your custom CSS classes into <header>.Few readers

• Filter Hook: zakra_header_top_container_class

  It adds CSS classes into the container of header top bar. You can use this filter if you want to add your custom CSS classes into header top bar content area or container.Few readers

• Filter Hook: zakra_header_main_container_class

  It adds CSS classes into the header main area section. You can use this filter if you want to add your custom CSS classes into header main area.Few readers

• Filter Hook: zakra_header_main_style_choices

  There are various header main style options provided in Customizer in Zakra. If you want to extend the available style options of Header Main Area then you can do it using zakraheadermainstylechoices filter hook.Few readers

• FIlter Hook: Primary Menu Class

  There are two hooks available that allow you to add your CSS class into the primary menu and they are zakranavclass and zakraprimarymenuclass . Both hooks add your class into site-navigation. zakranavclass appears before zakraprimarymenuclass.Few readers

• Filter Hook: zakra_header_action_class

  You can use this filter if you want to add your custom CSS classes into header-action.Few readers

• Filter Hook: Page Header

  Zakra provides various filter hooks to add your code to the page header section. They are as follows: zakrapageheadercontainerclass: You can add your custom CSS class into page header using this hook. zakrapageheadermarkup: This hook allows you to add any markup like h1, h2, p, etc. for page title of the page header. zakrapageheaderstylefilter: You can use this hook to extend the available options under the Header Style of Page Settings.Few readers

• Filter Hook: Page Title

  Zakra provides you various filter hooks for modifying the page title of your page. They are listed as below: zakratitle: You can use this filter to name the page title as per your need. zakrapagetitleenabled: It is used to choose whether to display page title in page header or content area. zakrapagetitlealignfilter: It is useful in changing the page title alignment.Few readers

• Filter Hook: zakra_breadcrumbs_enabled

  This filter is used to modify the visibility of the breadcrumbs. Enabling or disabling breadcrumbs is an option available in Customizer. You may want to alter its visibility on specific pages. This can be achieved through Page Settings in the Pro theme version. You can use zakrabreadcrumbsenabled hook to achieve this feature in a free theme. Example of using this filter: To disable breadcrumbs in search page only:Few readers

• Filter Hook: After Primary Content

  You can add your content or any code in the main content area of your page. There are two hooks available and they are zakraafterprimarystartfilter and zakraafterprimaryendfilter. zakraafterprimarystartfilter can be used to add code just after primary element. You may add your content or new html element or anything as per your need. zakraafterprimaryendfilter is used to add code just before the closing of primary element.Few readers

• Filter Hook: zakra_page_setting

  It is for adding a New Tab or Section in the Page Settings.Few readers

• Filter Hook: zakra_before_mobile_menu_toggle

  This hook allows you to add your code just before the mobile menu toggle. It appears after .tg-mobile-toggle element.Few readers

• FIlter Hook: zakra_sidebar_class

  It adds CSS classes into the sidebar. You can hook your custom CSS class into the sidebar using this filter.Few readers

• Filter Hook: Read More

  Zakra provides you various filter hooks to modify Read More tag as per your need. They are listed as below: zakrareadmorestyle: This filter allows you to extend the read more style choices available in the Customizer. zakrareadmoretext: You can modify Read More text using this filter. zakrareadmorewrapperclass: This filter allows you to add your custom CSS class into read more. Example: To change read more text:Few readers

• Filter Hook: Footer

  Zakra provides you various filter hook which allows you to add code to the footer of your page. They are listed as below: zakrafooterclass: You can add your CSS classes into the footer using this filter. zakrafooterwidgetcontainerclass: It adds CSS classes into the footer widget area. zakrafooterwidgetsenabled: You can either show or hide the footer widget using this filter. zakrafooterwidgetsstyle: Using this filter, you can modify the footer widget styleFew readers

• FIlter Hook: Scroll to Top

  Zakra provides you two filter hooks regarding scroll to top. They are zakrascrolltotopiconclass and zakrascrolltotopicon. You can add your CSS class into scroll to top icon using zakrascrolltotopiconclass filter. To change the default icon of the scroll to top you can use zakrascrolltotopicon filter. Example: To change the Scroll To Top icon using FIlter Hook.Few readers

• Filter Hook: Typography

  Zakra provides you with various filter hooks to modify the typography option of Customizer. They are listed below: zakrabasetypographyheadingfilter : Add your code to Base Typography. zakratypographypagetitlefilter: Add your code to Page/Post title typography. zakratypographyh1filter: Add your code to Heading 1 typography. zakratypographyh2filter: Add your code to Heading 2 typography. zakratypographyh3filter: Add your code to Heading 3 typogrFew readers