HARU

The HARU WordPress theme has a red and dark blue color scheme.

It has an After Header widget area with a full width hero image background. Using the Widget Logic plugin you can display this only on homepage.

You can also set the homepage to be a static page that uses the full-width-content template and you can easily have a business website.

Or you can delete the text widget from the After Header widget area and use it as a blog.

Download it from Github

** You need to have Genesis Framework in order to use the child theme. Genesis Framework is not included with the theme.

96 responses

  1. SUMIT KUMAR GUPTA Avatar
    SUMIT KUMAR GUPTA

    This is very nice theme. Could you tell me what is difference between child theme and parent theme

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can find more details here – https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/

      Reply
  2. Thomas Reid Avatar
    Thomas Reid

    I love your theme so much, but I can’t figure out how to change the image of the food in the after header widget area. Any help?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      I’m glad you like it. The image is located in /wp-content/themes/haru/images and it is named bg.jpg. Just replace that file with another image.

      Reply
      1. Sol Avatar
        Sol

        Hey, awesome theme. First time using wordpress and this has been fairly easy to navigate.

        With regard to changing the restaurant image you noted above, how do i change this from the Dashboard?

        Thanks, Sol

      2. Andrei Chira Avatar
        Andrei Chira

        You can’t change it from the dashboard. The image is located in /wp-content/themes/haru/images and it is named bg.jpg. Just replace that file with another image.

      3. Sol Avatar
        Sol

        Thanks. Went there and found it on my hosting account FTP page. First time actually going in there for any of the website development.

        Appreciate the support. Now I just need to create a suitable replacement image.

  3. Bernhard Rieder Avatar
    Bernhard Rieder

    How can you import all the demo pages and posts?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      In the theme folder, there’s an XML folder with a file named sample.xml, you can import that file using WordPress Importer at Tools > Import.

      Reply
      1. Bernhard Rieder Avatar
        Bernhard Rieder

        Great – will try that tomorrow. Love it so far.
        By the way… how remove Author and Date-Release of a blog post?

        Thank you so much!

      2. Andrei Chira Avatar
        Andrei Chira

        You can do that by installing the Genesis Simple Edit plugin and configure it from Genesis > Simple Edit in the admin area.

  4. Bernhard Rieder Avatar
    Bernhard Rieder

    Hi Andrei!

    This is fantastic. First time user of the genesis framework. I love it!

    One thing I noticed about Leaving a Comment [post_comments].
    If it’s activated, and I click on it, it should jump to the #respond section.

    For some reason it doesn’t work.

    I am assuming I would need to specify somewhere the ID #respond.
    I just can’t figure out how to do that with your theme.

    Thank you so much and keep rocking!

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Hi,

      I’ve tested on the demo of the theme and the links to #respond or #comments sections work fine.

      Reply
  5. Bernhard Rieder Avatar
    Bernhard Rieder

    I also imported the sample.xml file. It worked fine.
    The only thing I guess that was not included was the Sample Root URL Page from your Theme.

    I can’t figure out how you did it. I am referring to your demo page here:
    http://demo.fasterwp.com/haru/

    Is it possible to import that page as well?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      On the home page, there’s a widget area called After Header. Add a text or custom HTML widget there and the section will appear.

      Reply
  6. Bernhard Rieder Avatar
    Bernhard Rieder

    Andrei, thank you so much for all your help!
    I really do appreciate that a lot!

    I can’t figure out, where to change the background image (potatos, tomatos, toast) that shows up automatically after adding any widget to the After Header.

    Where and how to change that image?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      The image is located in /wp-content/themes/haru/images and it is named bg.jpg. Just replace that file with another image.

      Reply
  7. Bernhard Rieder Avatar
    Bernhard Rieder

    Something else I noticed, is the the layout of a category.
    I added all blog posts to the category “blog”.

    For some reason, the blog posts show up with the same picture twice.
    And with the full content – not just a summary or excerpt.

    Here is a screenshot:
    http://www.mediafire.com/convkey/26ac/nh0m74o9ewbb68qzg.jpg

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      From wp-admin at Genesis > Theme Settings you can set the Content Archives to display Excerpts and include the Featured Image, etc.

      Reply
      1. Bernhard Rieder Avatar
        Bernhard Rieder

        Awesome. Thank you so much Andrei – you made my day.

        Is there an option, to activate on the bottom of each page, an “arrow” button / when clicking that button, the user will scroll up to the start of the page?

        I love this theme…. it’s amazing.
        cheers

      2. Andrei Chira Avatar
        Andrei Chira

        Unfortunately, the theme doesn’t have a “back to top” button but I think you can do it with a plugin, search in the WordPress repository.

        I’m glad you like the theme, I appreciate it.

  8. Bernhard Rieder Avatar
    Bernhard Rieder

    Hi Andrei!

    Yes. This Theme is PURE AWESOMNESS. Haha.. love it.
    One more thing Andrei.

    For some reason on my page I am currently setting up a new blog… well.. the Post Comment Link just doesn’t work.

    I am assuming I must be doing something wrong.
    Is it ok to post a link to my page or do you want me to send it via DM to you?

    Thank you so much for your help and keep rocking!

    Reply
  9. Bernhard Rieder Avatar
    Bernhard Rieder

    ohh… one simple thing: how do you change the red theme color to any other different color?

    I can’t change the header color within the Customize section!

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can change the colors by editing the style.css file. There’s no easier way implemented in the theme.

      Reply
  10. Bernhard Rieder Avatar
    Bernhard Rieder

    do you have an example page, that shows how the Google AdSense looks like once integrated with the publisher ID?

    Thank you so much Andrei and keep rocking!
    cheers

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      I haven’t tested the Adsense implementation.

      Reply
  11. Bernhard Rieder Avatar
    Bernhard Rieder

    Thank you Andrei.

    I’ll try to implement everything over the weekend. And I will test the AdSense Implementation. I am curious how it works and I’ll share my results.

    One more thing I can’t figure out – a simple CSS Code.

    Here is a link to a screenshot of a blog post / mobile:
    http://www.mediafire.com/view/5v948x0c76uow4v/look.JPG

    I am also using Gutenberg Editor.
    It’s an image–>Transform to Gallery

    I just want that the image is aligned to the left – like marked red. I am not able to find the CSS Code with the Chrome Inspector.

    Do you have any idea what CSS Code can change this?
    And how I could find the right CSS code?

    Thank you so much for all your help!
    Again.. this is the best Theme I’ve ever had – super happy with it!

    Cheers,
    Bernhard

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      What is the URL of your website?

      Reply
      1. Bernhard Rieder Avatar
        Bernhard Rieder

        I am testing the theme at https://cash.care

      2. Andrei Chira Avatar
        Andrei Chira

        The image is in a gallery block and that adds the image to a list, as I can see. Lists have a padding, so that’s where that white space is.
        You could change the block from a gallery block to an image block since you only have one image, that should fix it.

  12. Bernhard Rieder Avatar
    Bernhard Rieder

    Thank you Andrei!

    Yes, I know. The reason why I was using the gallery block is because it adds the image Description so nice on the bottom of the image. The font is on top of the image.

    So I was wondering if I could use the gallery block with this nice effect and at the same time the image should be 100% in the width.

    Or maybe the image block would give me the option to add the text (image description) as nice as the gallery block.

    I tried to find the CSS code. But I was not able to identify with the chrome inspector.

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      The solution is to style the image caption (.wp-caption-text) to match the caption in the gallery (.wp-block-gallery .blocks-gallery-item figcaption). You’ll need to know a bit of CSS to get it right.

      Reply
  13. Bernhard Rieder Avatar
    Bernhard Rieder

    Hi Andrei!

    I realize, that somewhere in the theme, there are always two extra hidden links, called skip to content, and skip to footer.

    Do you know in which .php file this code is hidden so I can remove it?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You shouldn’t remove those, they are there for accessibility.

      Reply
  14. Bernhard Rieder Avatar
    Bernhard Rieder

    Another Link I would like to remove:
    If posts have been added to a category, it created at the bottom of the post the text: FILED UNDER: Link to the category.

    Do you know as well, what .php file has to be changed in order to remove that link?

    Thank you so much!

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can edit those form the Genesis Simple Edit plugin (Genesis > Simple Edits).

      Reply
  15. Nick Cavegn Avatar
    Nick Cavegn

    I can’t seem to get the featured image to display on single posts. Any idea why?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      The featured image doesn’t show on the single post.

      Reply
      1. Bernhard Avatar
        Bernhard

        is it possible to always show the featured image on top of every single post?
        hmm… somehow automatically by selecting that kinda option?

      2. Andrei Chira Avatar
        Andrei Chira

        You can implement it with code. Here’s a tutorial – https://sridharkatakam.com/how-to-show-featured-image-below-entry-content-on-single-posts-in-genesis/

  16. Sol Avatar
    Sol

    On the individual pages (aside from the home page) and the post pages, I see that there is a place at the bottom right to select a featured image that would come up as a preview image when someone links to the page from LinkedIn, Facebook, etc.

    Is there a similar way to update the preview image that is used for the homepage?

    Thanks,
    Sol

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can use the Yoast SEO plugin, it has the feature you want.

      Reply
      1. Sol Avatar
        Sol

        Thanks. I’ll download that plugin.

  17. Kevin Avatar
    Kevin

    My category and tags are not showing on my posts?

    How to fix that?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can use the Genesis Simple Edits plugin – https://wordpress.org/plugins/genesis-simple-edits/

      Reply
      1. Kevin Avatar
        Kevin

        Thank you!

  18. Bernhard Avatar
    Bernhard

    How can you embed Videos with a 100% width?
    Vimeo, YouTube, etc.?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Do you mean the full width of the post container or the full width of the browser window?

      The post container is 718px wide so you need to set this width for the embedded video.

      For the full width of the browser window, the theme should have Gutenberg compatibility, and it has not, unfortunately.

      Reply
  19. Bernhard Avatar
    Bernhard

    Hi Andrei!

    Thank you for your help, appreciate it!
    I would like to embed more Vimeo Videos, or Youtube Videos on one page.

    If I do it with Gutenberg, I get to large spaces between. Especially top and bottom.

    If I use the HTML Code and change the pixel to 718×404 I am running into the same issues.

    It’s ok if I can’t get teh full width of the browser window. It makes sense, that all videos stay within the post container or page container.

    However.. if you try to just embed two videos in one row, you will see the spacing issue.

    Hmmm… if I would just know how to control the css code.. I guess then I might be able to change the top and bottom spacing.

    To bad that the Gutenberg Embed Spacing doesn’t work out either.

    If you try it with just two or three videos, in one blog post.. you will see what I mean.

    A Video Gallery would be great – but I am also ok if I just can add one video, and the next, and the next, and so on. But without crazy top and bottom spacing.

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      I tested here – http://demo.fasterwp.com/haru/sample-post-with-youtube-and-vimeo-embeds/ – can’t see a problem.

      Reply
      1. Bernhard Rieder Avatar
        Bernhard Rieder

        But how can you make the videos appear 100% – so that the video width fills up the entire column?

        As you can see in your example. The video covers maybe 60% of the column.
        Any css-code that could make the video width 100%?

      2. Andrei Chira Avatar
        Andrei Chira

        When you get the embed code from Youtube, you can set a custom width and height.

  20. Jesika Amanda Avatar
    Jesika Amanda

    Can you ask me its nulled theme ?

    If its not nulled then why its have premium feature link this website coffeedx.com ?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      I don’t understand your question, sorry.

      I made the theme and I’m giving it away for free, and the coffeedx.com website is using it. Looks like they customized it, which is cool.

      Reply
  21. Sol Avatar
    Sol

    On my pages or article posts, I am able to upload a featured image that is shown when the page URL is shared on Facebook or LinkedIn.

    Is there a way to do something similar for the main page of the site?

    Thanks,
    Sol

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      If you have set a static page as your homepage you can set a featured image from that page. Otherwise, you can set an image to be used for social media using the Yoast SEO plugin.

      Reply
  22. Bernhard Avatar
    Bernhard

    I can’t figure out how I can install the child theme for Haru?
    Does it have to be a child theme called “Child Theme Haru”?
    Or is the Genesis Sample the Child Theme?

    I found numerous articles talking about the reason, why you want to use a child theme. But I didn’t find even one step by step tutorial, that explains how to install a child theme for Haru and the genesis framework?

    Anythting? I am really lost and would love to install the child theme.
    Just don’t know where and how to start!

    Reply
  23. Bernhard Avatar
    Bernhard

    I found for example this youtube video, but still didn’t answer my question.
    It’s very confusing. It doesn’t tell you if the genesis sample is the child theme?

    But even so.. I have the genesis sample installed.. but of course I also have HARU installed.

    I can’t see within my WP Dashboard what’s a child theme or how to activate it?
    I am totally lost! Thank you so much for any clarification!

    Reply
  24. Bernhard Avatar
    Bernhard

    ohh.. forgot the link from the youtube video. Here we go:
    https://www.youtube.com/watch?v=QU2tqgmiD-Y

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You don’t need a child theme for Haru, Haru is a child theme for Genesis Framework.
      Genesis Framework is the parent theme, Haru is the child theme. Genesis Sample is also a child theme.

      Reply
  25. Rayyan Avatar
    Rayyan

    Hey Andrei,
    Firstly I thank you for sharing the child theme for free.

    I wanted to change the color of the font and make it look like simplenet.io.
    Please guide me on how to do it.

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      You can change the color of the font by editing the style.css file. Look for the body {color:#45233e;} and change the color code with the one you want. You can learn more about CSS colors here – https://www.w3schools.com/css/css_colors.asp

      Reply
  26. Bernhard Avatar
    Bernhard

    For some reason, the link “leave a comment” does not work and doesn’t prompt the user to the comment section. I don’t know why and what I have to change to make this work.

    You can see the example on my 3D Design Blog https://fattybull.com/3d-studio-lighting-setup/

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      It works for me. I have accessed your website, clicked “leave a comment” and the page scrolled to the comments section.

      Reply
  27. Bernhard Avatar
    Bernhard

    Hi Andrei!

    This is strange. What Browser are you using? I am running the latest Chrome browser.

    Hmmm…. I guess have to record a video and show you.. I tested also the incognito mode… but didn’t change anything… strange…

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Latest Safari on latest MacOS.

      Reply
  28. Bernhard Avatar
    Bernhard

    Hi Andrei!

    I made this Video for you to show you the issues.
    https://youtu.be/Jvhfdnm2PiA

    #1: The Leave a comment
    #2: Lists for mobile

    anyways.. besides that… the best Theme ever!
    keep rocking & thank you so much for all your help all this time!

    Reply
  29. Bernhard Avatar
    Bernhard

    Hi Andrei!

    another quick question. I just installed the theme on another website of mine. For some reason, after a brand new installation, Videos from Youtube or Vimeo are not being rendered 100% in the width of a post.

    I know all that thing can be done with .css
    But I can’t find the right code to make this work.

    Look here:
    https://bit.ly/2LsmRCi

    There is one Vimeo Video and one from Youtube.
    I can’t figure out what .css code I need to make the video’s 100% in the width.

    The Image works.. but not the videos.

    Do you know the .css code I would need to use to get this fixed?

    Thank you so much for any little help,
    Bernhard

    Reply
  30. Sol Rosenbaum Avatar
    Sol Rosenbaum

    In the Haru sample page, you have a menu within the header bar. Can you explain how to add that? I’m not seeing that as a menu option.

    Also, I changed the image bg.jpg as you explained above, but the image is not showing up. I think it might be because I have a menu bar right below the header.

    If you want to have a look, the site is http://www.TheEngineeringMentor.com

    Thanks

    Reply
  31. Andrei Chira Avatar
    Andrei Chira

    Hi,

    We no longer offer support for these themes. Genesis is evolving and we cannot keep up, especially since we’re making these free.

    Reply
  32. Bernhard Avatar
    Bernhard

    Hi Andrei!

    Today, I found something very crucial. The HARU Theme doesn’t work on Internet Explorer Edge. Uff.. this is really huge.

    Is there anything that you and your team could fix to make that work?
    I didn’t try Mozilla, or any other browsers because I just used Chrome.

    But I know many other people are still using Edge.
    This is really major – I don’t know why that happened.

    Reply
    1. Bernhard Avatar
      Bernhard

      ohhh.. I found some of the issues… extensions inside chrome and a cache plugin caused the problem. Had nothing to do with the theme. Just wanted to make sure everyone knows!

      Reply
  33. Sol Rosenbaum Avatar
    Sol Rosenbaum

    For each of my posts, I create a featured image that is set to the proper size for LinkedIn/Facebook. When I link from those platforms, the preview image is great.

    However, on the website itself, the thumbnail image that appears next to the post is just a cropped down image from that image. This makes it look funny since you can’t read the full title in the image.

    Is there a way to make a separate image for the thumbnail to avoid this issue?

    Reply
    1. Sol Rosenbaum Avatar
      Sol Rosenbaum

      I should add that I see in the theme setting a way to change that from thumbnail size to another size, but then it just shows the full featured image.

      So what I am really asking is if there is a way to have one image for linking and another for that thumbnail?

      Reply
      1. Andrei Chira Avatar
        Andrei Chira

        I think you need to check in WordPress Setting > Media to see what the thumbnail sizes are, set them as you wish, and use a plugin to regenerate thumbnails like AJAX Thumnbnail Rebuild.

      2. Sol Rosenbaum Avatar
        Sol Rosenbaum

        Thanks

  34. gangagyan Avatar
    gangagyan

    Wow Wonderful Information I really like this one

    Reply
  35. Bernhard Rieder Avatar
    Bernhard Rieder

    If I do have a Password Protected Page and someone has entered the password, it always displays the Word PROTECTED before the first Header Tag.

    Is there a way to remove the word “protected” before the title tag?

    thank you so much again for this wonderful theme.
    The best ever!

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      It’s a WordPress thing, not related to the theme. This came up on a Google search – https://www.isitwp.com/remove-private-or-protected-before-title/

      Reply
  36. Bernhard Avatar
    Bernhard

    Master Andrei, I was always wondering how the HTML code looks like from your Widget “Newsletter”. That you have on your Start-Homepage in the upper right corner and that also collects the Email.

    Basically the Newsletter Signup!

    Do you mind sharing or posting the Code for the Widget?
    I would like to setup one for myself.

    I just can’t get it done as seamless as your’s is.
    Your widget just blends perfectly.

    Thank you so much and keep rocking!
    cheers

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Install the plugin “Genesis eNews Extended”, then drag the “Genesis eNews Extended” widget in the Primary Sidebar widget area, and complete the necessary fields. It should look like the demo.

      Reply
  37. Bernhard Avatar
    Bernhard

    This is fantastic. Thank you so much.

    A quick note here in case someone else has troubles setting it up using ActiveCampaign. I had to copy just the naked .php line code into the Form action.

    https://your-domain.activehosted.com/proc.php

    I also had to make sure, that the Email Form Name is exactly the same you use from your Email Provider. It’s case sensititve.

    My form field was named “email” all lower case.
    So I had to make sure it’s entered inside of the Email Field exactly the same.

    Hidden Fields:
    for example. I had to copy all those hidden fields into the provided field.

    Otherwise it wouldn’t have worked.
    But it finally works.

    Thank you so much Andrei.

    By the way.. is there also a plugin that allows you to embed the same form field into a blog-post? Like, an integration with a Snippet?
    Or something like that?

    That would be super cool.

    Thanks a lot for all your help – like always.
    You rock!!!!! cheers!

    Reply
  38. Rahul ji Avatar
    Rahul ji

    Hi Andrei,
    I like this Haru WordPress theme.
    But I want to know do you make a customized themes for customers?

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Sorry, I don’t. I’m not a developer, just playing around with CSS, colors and fonts.

      Reply
  39. ProHindustani Avatar
    ProHindustani

    Hey, nice information and awesome theme dude. Longlive

    Reply
  40. kami Avatar
    kami

    How to set logo in this theme, can’t find it
    thx

    Reply
  41. HowtoGyaan Avatar
    HowtoGyaan

    Really good theme

    Reply
  42. shambhu Avatar
    shambhu

    how can i improve my site speed.

    Reply
  43. Bernhard Avatar
    Bernhard

    How can I make sure that the featured image will show up on the top of each post?
    I can’t find that setting … ufff

    Reply
    1. Bernhard Avatar
      Bernhard

      ohh.. had this before.. just copy and paste so the info doesn’t get lost:

      Want to add featured image below content on single post pages in Genesis?

      Create a file named single-post.php in your child theme directory having the following code:

      <?php

      add_action( 'genesis_before_entry_content', 'custom_featured_image' );
      /**
      * Show featured image (if present) before content on single posts.
      */
      function custom_featured_image() {
      // if there is no featured image, abort.
      if ( ! has_post_thumbnail() ) {
      return;
      }

      printf( '’, genesis_get_image( ‘format=url&size=medium_large’ ), the_title_attribute( ‘echo=0’ ) );
      }

      genesis();

      Reply
  44. Selmore Avatar
    Selmore

    Andrei,

    Thank you for these themes. I’ve used them for years as starters and they have everything I need.

    (Any more you have in mind to make would be appreciated 🙂

    Although now the Framework is Open Source, competition to build child themes might HEAT UP just a little.

    What are your thoughts?

    Selmore

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      Thank you for your appreciation.
      I think the move is now towards Gutenberg and full-site editing, and child themes will be just CSS customizations of a blank parent theme. Child themes could be some sort of templates with block patterns.

      Reply
  45. Ravi Ranjan Avatar
    Ravi Ranjan

    This is very nice theme. Could you tell me what is difference between child theme and parent theme

    Reply
    1. Andrei Chira Avatar
      Andrei Chira

      This is better explained in the WordPress codex – https://developer.wordpress.org/themes/advanced-topics/child-themes/

      Reply
  46. jodh singh Avatar
    jodh singh

    awesome and intresting information, thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *