HARU

June 18, 2018

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.

In:

Genesis Child Themes

96 responses to “HARU”

SUMIT KUMAR GUPTA
September 8, 2018
This is very nice theme. Could you tell me what is difference between child theme and parent theme
Reply
1. Andrei Chira
  September 10, 2018
  You can find more details here – https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/
  Reply
Thomas Reid
September 16, 2018
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
  September 16, 2018
  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
    December 23, 2018
    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
    Reply
    1. Andrei Chira
      December 24, 2018
      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.
      Reply
      1. Sol
        December 24, 2018
        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.
Bernhard Rieder
November 26, 2018
How can you import all the demo pages and posts?
Reply
1. Andrei Chira
  November 27, 2018
  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
    November 27, 2018
    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!
    Reply
    1. Andrei Chira
      November 27, 2018
      You can do that by installing the Genesis Simple Edit plugin and configure it from Genesis > Simple Edit in the admin area.
      Reply
Bernhard Rieder
November 27, 2018
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
  November 27, 2018
  Hi,
  I’ve tested on the demo of the theme and the links to #respond or #comments sections work fine.
  Reply
Bernhard Rieder
November 27, 2018
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
  November 27, 2018
  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
Bernhard Rieder
November 27, 2018
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
  November 28, 2018
  The image is located in /wp-content/themes/haru/images and it is named bg.jpg. Just replace that file with another image.
  Reply
Bernhard Rieder
November 27, 2018
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
  November 28, 2018
  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
    November 29, 2018
    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
    Reply
    1. Andrei Chira
      November 29, 2018
      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.
      Reply
Bernhard Rieder
November 29, 2018
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
Bernhard Rieder
November 30, 2018
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
  December 1, 2018
  You can change the colors by editing the style.css file. There’s no easier way implemented in the theme.
  Reply
Bernhard Rieder
December 3, 2018
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
  December 4, 2018
  I haven’t tested the Adsense implementation.
  Reply
Bernhard Rieder
December 5, 2018
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
  December 5, 2018
  What is the URL of your website?
  Reply
  1. Bernhard Rieder
    December 5, 2018
    I am testing the theme at https://cash.care
    Reply
    1. Andrei Chira
      December 6, 2018
      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.
      Reply
Bernhard Rieder
December 6, 2018
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
  December 6, 2018
  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
Bernhard Rieder
December 24, 2018
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
  December 27, 2018
  You shouldn’t remove those, they are there for accessibility.
  Reply
Bernhard Rieder
December 24, 2018
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
  December 27, 2018
  You can edit those form the Genesis Simple Edit plugin (Genesis > Simple Edits).
  Reply
Nick Cavegn
January 9, 2019
I can’t seem to get the featured image to display on single posts. Any idea why?
Reply
1. Andrei Chira
  January 16, 2019
  The featured image doesn’t show on the single post.
  Reply
  1. Bernhard
    January 26, 2019
    is it possible to always show the featured image on top of every single post?
    hmm… somehow automatically by selecting that kinda option?
    Reply
    1. Andrei Chira
      February 7, 2019
      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/
      Reply
Sol
January 18, 2019
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
  January 18, 2019
  You can use the Yoast SEO plugin, it has the feature you want.
  Reply
  1. Sol
    January 19, 2019
    Thanks. I’ll download that plugin.
    Reply
Kevin
February 15, 2019
My category and tags are not showing on my posts?
How to fix that?
Reply
1. Andrei Chira
  February 16, 2019
  You can use the Genesis Simple Edits plugin – https://wordpress.org/plugins/genesis-simple-edits/
  Reply
  1. Kevin
    February 16, 2019
    Thank you!
    Reply
Bernhard
February 24, 2019
How can you embed Videos with a 100% width?
Vimeo, YouTube, etc.?
Reply
1. Andrei Chira
  February 24, 2019
  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
Bernhard
February 24, 2019
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
  February 25, 2019
  I tested here – http://demo.fasterwp.com/haru/sample-post-with-youtube-and-vimeo-embeds/ – can’t see a problem.
  Reply
  1. Bernhard Rieder
    November 17, 2019
    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%?
    Reply
    1. Andrei Chira
      November 17, 2019
      When you get the embed code from Youtube, you can set a custom width and height.
      Reply
      1. Bernhard
        November 17, 2019
        yes, but unfortunately. That doesn’t work at all. When I try to use the embed code the theme can’t handle it at all. It shows the iframe code.
        I tried to identify the css code – with the google chrome inspector.
        But I can’t find the code that I would need to use to make sure yotube videos and vimeo videos are 100% in the width.
        Are you able to identify the code?
        It should be just a few lines in the css.
        Thank you so much for any little help,
        I really do appreciate that especially knowing that this theme is free and you put so much efforts into it.
        That’s very very nice from you.
        Again, appreciate any little help – keep rocking!
        cheers
Jesika Amanda
April 12, 2019
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
  April 12, 2019
  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
Sol
May 6, 2019
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
  May 6, 2019
  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
Bernhard
June 9, 2019
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
Bernhard
June 9, 2019
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
Bernhard
June 9, 2019
ohh.. forgot the link from the youtube video. Here we go:
https://www.youtube.com/watch?v=QU2tqgmiD-Y
Reply
1. Andrei Chira
  June 10, 2019
  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
Rayyan
June 13, 2019
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
  June 13, 2019
  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
Bernhard
July 9, 2019
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
  July 9, 2019
  It works for me. I have accessed your website, clicked “leave a comment” and the page scrolled to the comments section.
  Reply
Bernhard
July 10, 2019
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
  July 12, 2019
  Latest Safari on latest MacOS.
  Reply
Bernhard
July 27, 2019
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
Bernhard
September 1, 2019
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
Sol Rosenbaum
September 3, 2019
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
Andrei Chira
September 3, 2019
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
Bernhard
September 16, 2019
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
  September 17, 2019
  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
Sol Rosenbaum
November 25, 2019
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
  November 25, 2019
  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
    November 25, 2019
    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.
    Reply
    1. Sol Rosenbaum
      November 25, 2019
      Thanks
      Reply
gangagyan
January 3, 2020
Wow Wonderful Information I really like this one
Reply
Bernhard Rieder
January 13, 2020
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
  January 23, 2020
  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
Bernhard
March 27, 2020
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
  March 27, 2020
  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
Bernhard
March 28, 2020
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
Rahul ji
May 4, 2020
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
  May 6, 2020
  Sorry, I don’t. I’m not a developer, just playing around with CSS, colors and fonts.
  Reply
ProHindustani
May 22, 2020
Hey, nice information and awesome theme dude. Longlive
Reply
kami
June 4, 2020
How to set logo in this theme, can’t find it
thx
Reply
HowtoGyaan
July 17, 2020
Really good theme
Reply
shambhu
October 14, 2020
how can i improve my site speed.
Reply
Bernhard
October 17, 2020
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
  October 17, 2020
  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
Selmore
July 1, 2021
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
  July 1, 2021
  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
Ravi Ranjan
October 5, 2021
This is very nice theme. Could you tell me what is difference between child theme and parent theme
Reply
1. Andrei Chira
  October 5, 2021
  This is better explained in the WordPress codex – https://developer.wordpress.org/themes/advanced-topics/child-themes/
  Reply
jodh singh
January 17, 2022
awesome and intresting information, thanks for sharing.
Reply

HARU

96 responses to “HARU”

Leave a Reply Cancel reply