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.
** You need to have Genesis Framework in order to use the child theme. Genesis Framework is not included with the theme.
This is very nice theme. Could you tell me what is difference between child theme and parent theme
You can find more details here – https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/
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?
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.
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
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.
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.
How can you import all the demo pages and posts?
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.
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!
You can do that by installing the Genesis Simple Edit plugin and configure it from Genesis > Simple Edit in the admin area.
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!
Hi,
I’ve tested on the demo of the theme and the links to #respond or #comments sections work fine.
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?
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.
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?
The image is located in /wp-content/themes/haru/images and it is named bg.jpg. Just replace that file with another image.
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
From wp-admin at Genesis > Theme Settings you can set the Content Archives to display Excerpts and include the Featured Image, etc.
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
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.
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!
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!
You can change the colors by editing the style.css file. There’s no easier way implemented in the theme.
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
I haven’t tested the Adsense implementation.
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
What is the URL of your website?
I am testing the theme at https://cash.care
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.
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.
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.
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?
You shouldn’t remove those, they are there for accessibility.
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!
You can edit those form the Genesis Simple Edit plugin (Genesis > Simple Edits).
I can’t seem to get the featured image to display on single posts. Any idea why?
The featured image doesn’t show on the single post.
is it possible to always show the featured image on top of every single post?
hmm… somehow automatically by selecting that kinda option?
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/
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
You can use the Yoast SEO plugin, it has the feature you want.
Thanks. I’ll download that plugin.
My category and tags are not showing on my posts?
How to fix that?
You can use the Genesis Simple Edits plugin – https://wordpress.org/plugins/genesis-simple-edits/
Thank you!
How can you embed Videos with a 100% width?
Vimeo, YouTube, etc.?
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.
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.
I tested here – http://demo.fasterwp.com/haru/sample-post-with-youtube-and-vimeo-embeds/ – can’t see a problem.
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%?
When you get the embed code from Youtube, you can set a custom width and height.
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
Can you ask me its nulled theme ?
If its not nulled then why its have premium feature link this website coffeedx.com ?
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.
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
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.
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!
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!
ohh.. forgot the link from the youtube video. Here we go:
https://www.youtube.com/watch?v=QU2tqgmiD-Y
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.
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.
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.aspFor 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/
It works for me. I have accessed your website, clicked “leave a comment” and the page scrolled to the comments section.
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…
Latest Safari on latest MacOS.
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!
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
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
Hi,
We no longer offer support for these themes. Genesis is evolving and we cannot keep up, especially since we’re making these free.
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.
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!
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?
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?
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.
Thanks
Wow Wonderful Information I really like this one
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!
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/
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
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.
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!
Hi Andrei,
I like this Haru WordPress theme.
But I want to know do you make a customized themes for customers?
Sorry, I don’t. I’m not a developer, just playing around with CSS, colors and fonts.
Hey, nice information and awesome theme dude. Longlive
How to set logo in this theme, can’t find it
thx
Really good theme
how can i improve my site speed.
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
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();
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
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.
This is very nice theme. Could you tell me what is difference between child theme and parent theme
This is better explained in the WordPress codex – https://developer.wordpress.org/themes/advanced-topics/child-themes/
awesome and intresting information, thanks for sharing.