Disqus is a popular comment platform after the default WordPress comment system and CommentLuv (read more about CommentLuv). For many bloggers, the thoughts of exporting hundreds or thousands of comments from WordPress system to Disqus could be a very daunting experience.
Lucky for you, I’m going to share how you can easily import all your WordPress comments straight into Disqus … without hassle.
What is Disqus?
According to Wikipedia, Disqus, Inc. is a blog comment hosting service for websites and online communities that uses a networked platform.
What are the advantages using Disqus compared to CommentLuv or WordPress default comment system?
Here’s a real fact.
I know tons of bloggers who swear NOT to step foot onto my blog just because I don’t have CommentLuv.
Yup, seriously.
And the simple is really simple; they were looking for simple / easy backlinks (even though it’s pretty obvious that links on my comments are strictly no-follow).
Here are some reasons why I changed to Disqus from the beloved CommentLuv:
Good by spam (Disqus help me clear over 200 spams a day)
Easy moderation of comments on various blogs with just the Disqus admin page
Here’s my confession. The reason of me changing to Disqus is simply because I hated the number of spams I receive daily. On a good day, I receive around 200 and on bad days, I get over 500.
How to import WordPress comments to Disqus?
The whole process of importing and exporting comments into Disqus are fairly simple. There’s no need for hair pulling if you are worried of that.
Just follow the steps below and you should be just fine.
1. Download the Disqus plugin from your WordPress dashboard.
2. Install and activate the Disqus plugin.
3. Go to Disqus settings to configure the plugin.
4. Enter your Disqus shortname (you need to register first before you can get the shortname – Register here). The shortname can be anything. For me, I choose something that is easy for me to remember. One shortname represents one website and thus, you may create more shortnames if you have more than one website.
5. Once you acquired the Disqus shortname, you should add it to Disqus and it will show automatically on your setting page.
6. The next step is to setup Disqus login for your visitors. See the image below. All you need to do is to click on the hyperlink to get your API.
7. The last step is to export all comments from WordPress default commenting system to Disqus platform. This can be done easily using the ‘Import and Export’ option on Disqus.
All you need to do is to click on the Export Comment button and just wait for it to complete. The more comments you have, the longer it will take for you to get the exporting comment done.
Grab a coffee or a smoke while waiting for the comment to be exported to Disqus.
It took me about 20 minutes to export over 2,300 comments from WordPress to Disqus.
Once that is done, the Disqus comment system is ready for using and you can turn off any comment system you have on your blog.
Do you find this tutorial useful?
Importing WordPress comments to Disqus is pretty easy and it wouldn’t take long to get the job done.
Do you have any issues with Disqus? Just fire up your questions using the comment form below and I’ll get back to you real soon!
I have been a huge fan in the web development industry and my knowledge in coding is close to zero.
My only tools of trade are the various theme builders and I usually build my homemade themes around Genesis Framework. Usually, my only go-to tools will be like this one (as it offers excellent integration with Genesis).
With over 8 years of blogging under my belt, I was tired and a little bored with Genesis Framework. I wanted to move along a new path and many options come into my mind.
For starters, being spoil with over 40 professional themes is seriously bad for psychology and I took up the challenge to build my own theme.
I headed over to Theme Forest and began scouting for a new website build and it only took awhile for me to locate one that is extremely out standing.
X – The Ultimate WordPress Theme Builder
Let’s be completely honest here. When I first saw it, I was really attracted to the ‘X’ word. It reminds me a lot about X-men (huge fan here).
This is a complete review of X Theme and thus, that’s what you are getting here; Both the pros and cons as well.
And I thought the developers are definitely bold enough to name it with a single letter word.
Just like any other human being, my eye was attracted to the price … my eyes literally popped out.
A whopping $60 for Christ’s sake!
Okay, for those who have no idea about the themes at Theme Forest, you can get tons of website theme builders around $40 each.
This doesn’t stop me there but instead, I was curious on what the X theme has to offer. I mean, selling a theme for an extra $20 would either make or break the business … easily.
And to cut the story short, I bought the X theme in the next few minutes.
I toy-ed around with it for a couple of days and I am not sure if the word ‘impressive’ fits the case.
Have a look at my complete review below.
X Theme Review – Is It Worth Your $60?
Okay, so you roughly know what X theme is by now. If you have no idea, here is a list of what X theme offers:
Complete website builder
Interactive visual and building features
Close to WYSIWYG (What You See Is What You Get)
Crazy customization options
And X theme was created based on recommendations by 9 industry experts.
Disclaimer: This is one of the biggest buying factor for me. Having a theme recommended by 9 industry experts? Hell yes!
Installing and basic setting up of the X theme
A walk in the park.
Yes, that’s how easy it is to get the X theme working on your website. All you need are:
Upload to WordPress database > Select the theme > Activate
After activating, it will prompt you that you need to install several other plugins to make the X theme work properly such as:
Revolution Slider
WPBakery Visual Composer
X Shortcodes
Don’t worry, those are required to get the X theme running properly.
After installation, you will see the Customizer option in your WordPress dashboard.
X theme settings are instantly visible after installation
Building WordPress theme with The X
This is where everything become really juicy. You are (not really) required to build everything from scratch and all the options are very straight forward.
This is the general control panel for X theme
The above image is the main ‘control panel’ for your theme. You can literally build everything and anything with these custom options; from typography to button sizes and colours.
When using the X theme, the sky is really the only limit you have.
Before you even start customizing the X theme, you need to decide the basic structure of the X theme; integrity, renew and icon.
Integrity
Clean and professional outlook
Best fit for corporate websites and blogs as well
The real advantage of using Integrity is to highlight Call-To-Action (CTA) options
Renew
Flat design but with huge 3-D effect (if configured properly)
Excellent for blogs
Clear theme with one purpose; outline your contents
Icon
Modern but minimal designs
Unique layout which could make your blogs stand out
Best fit for blogs and extremely interactive (visual) with visitors
Personally, you won’t go wrong with any of the three options but at the moment, I don’t see any option to use all of them at the same time.
Once you have selected the above, the next step would be setting up the different layouts for your website.
There are several layout options to choose from for customization
X theme allows you to choose your preferred navigation options with ease
This means that you can decide whether to choose:
Sidebar position
Navigation position
And if you think that’s all about the X theme, you are absolutely wrong. There is also option to create floating bars and you don’t need a plugin for that!
Now tell me … how cool is that?
Create ‘one-of-the-kind’ homepage with the X Theme
X theme is pretty and it is a great WordPress theme.
Great … but, you can’t seem to be able to recreate the homepage as what you thought and it is challenging.
I been through this myself. For starters, that is insanely tough. You have no idea where to start and totally lost.
You thought the drag and drop feature was as easy as A, B and C but it wasn’t. And you feel like asking for a refund (if possible).
Before you even throw in the towel, allow me tell you that you are missing something out.
The X theme offers unlimited customization features but it has a little learning curve and logic is absolutely needed.
What you can do is head over to their demo page and check out the 30 website designs available. Choose one that fits your requirements and download the demo version.
Upload it to your website (create a new page) and modify from there. The below is an example of my modification page layout.
If you know some slight coding knowledge, you can easily modify your homepage without visual composer
This is what it looks like after creating a homepage with X theme visual composer
As you can see above, there are two ways to build a homepage using The X theme. You can either use the visual composer (highly recommended) or the shortcodes if you know what you are doing.
If you want to build a homepage fast using The X theme, use the visual composer as it is much easier. Here are the various options you can choose from when using the visual composer for building a website theme (from scratch).
Building a page is easy using visual composer
Additional features of The X theme
The X theme is not only a great WordPress theme builder but as well as an excellent ecommerce theme.
It is fully integrated with the popular WooCommerce platform and you can easily put the visual advantage available to blow your customers away.
While many other themes would just leave you with one layout options, each stack (Integrity, Renew and Icon) will offer an absolutely different layout and theme design for your ecommerce website.
Not only that, there are many smaller features which you could use such as the delay of visual features. This is an absolute replicate to the popular WordPress plugin, Lazy Load.
If you are worried about website loading speed, you are in good hands when you use The X theme.
So, goodbye slow website!
The X theme also comes with over 400 icon fonts. This means that there is no longer the need to hunt for the suitable icons for your website.
Need to find an thumbs up, star or people icons? Don’t worry, X theme has them all!
Last but not least, the support on the forum is great.
On average, I get a reply within 60 minutes of posting a question during working hours and that is insane. The community at there are also very helpful and you are definitely in good hands since most of them are website developers.
Review: Is The X Theme worth it?
While $60 would probably half the crowd away, I would say that it is one hell of a website builder.
With all the juicy features it can offer, I would absolutely be amazed if anyone would actually turn down this offer (unless you are nuts or plain stingy 🙂 ).
Being a WordPress junkie and a homemade website theme developer, I would say this is probably the best $60 I ever spend on a WordPress theme.
Don’t allow my review to mess with your decision but with over 829 sales and 4.5/5 star ratings since the release of it, I bet the data speaks for itself.
The sales and rating stats speak for itself
I hope you enjoy this X theme review and if you are using the X theme, you are obligated (literally) to tell me what you think using the comment form below. If you have any questions about the X theme, fire your questions and I will try to answer them all.
If you want to see what X theme is all about, you can check it out for free here! The X theme by Theme.co.
By now, you would probably heard about browser caching and you thought that W3 Total Cache had solved the issue for you. Heading over to GTmetrix and it shows that you have the leverage browser caching issue.
As complicated as it may sound, the solution for this WordPress issue is actually relatively easy.
Does this looks familiar to you?
Before we go into a solution for this WordPress issue, let’s take a quick moment to understand what is the function of browser cache feature.
What is browser cache?
Whenever a browser loads a webpage, it will download all the web files from the hosting server to display the page properly. This means that it includes all the related HTML, CSS, javascript and images on that page.
Browser caching is a feature that ‘remembers’ the resources above that the browser had already loaded previously. In other words, the browser do not need to redownload these files again if your visitor decide to move from one page to another on your website.
The end result of browser caching is your website will load much faster and in return, happier visitors.
Why is is browser caching important?
Browser caching helps to reduce the load on your servers and indirectly, improving the load time of the website.
How to fix leverage browser caching issue in WordPress?
In geeky terms, you need to edit your HTTP headers to set expiry dates on certain types of files.
Sounds complicated? The below is the simplified version:
It is done by adding some codes to a file called .htaccess on your website.
There are several ways to go access your .htaccess which are through:
cPanel File Manager
FTP clients
For most shared hostings, you can access the .htaccess directly which is much easier. For those who use premium hostings like WP Engine, you would need to use FTP clients for security reasons.
The file, .htaccess is usually located on your /www location on your web host or File Manager page.
Important: Remember to make a copy of the original .htaccess file before editing it.
Open the file, add the code below and press save. You can place the code any where at the top of the file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
While the above codes are meant to be used for general websites, you may set different expiry dates especially for files that are updated more frequently.
The method of changing the duration is relatively easy. In the case where you would like to change the browser cache duration, select the ‘1 year’ and replace it with any duration of your choice, such as ‘1 month’.
Additional browser cache tips
Browser caching could affect your website loading speed in a big way and therefore, you should always be aggressive when caching static resources.
In terms of the recommended cache duration, it would be at a minimum of one month but for the best and most optimized settings, ‘access plus 1 year’ is the best for most websites.
Once you have done everything as the above, you should clear your browser cache and cookie before it will takes effect.
I certainly hope this simple tutorial will help you fix the leverage browser caching issue on your WordPress. Tell me what you think about this and if you like it, please share it around too!
Cheap hosting plans are great especially when you are tight in budget or would want to get a blog up and fast. However, how reliable are cheap hosting plans?
Before we dig into this post, this reminded me of my recent holiday in Taiwan.
I wanted to go to a religious area called Lukang and it would take me around $70 NTD using the city bus. Being an adventurous person by nature, I hopped on the respective bus and started my journey. It took me a whopping 1 hour and 45 minutes to reach my destination.
And I believe I was rather ‘stupid’ as I could easily pay a taxi $200 NTD and reach the same destination in just 20 minutes!
The moral of the story here is clear; the destination point is the same but the route to it would be extremely different.
So, how does this relate to choosing a web hosting service?
For one, my daily Facebook messages would be either friends asking which is the best, affordable or cheap web hosting. By default, I would always be recommending WP Engine anytime of the day.
Okay, I totally get it. Not many of us are willing to ditch out at least $29 per month for a single website hosting and thus, choosing a more economical hosting package would be a better and not to mention, a smarter choice.
Putting aside the low start up cost, is there anything you should know about these cheap hosting plans?
The answer is yes and see below.
3 virtually important facts you should know about cheap hosting plans
#1 – Web hosting security features
There isn’t a single web hosting service out there which is bulletproof to hackers and malwares (including premium web hosting).
Majority of these affordable web hosting companies would just provide moderate to ‘none at all’ security check.
This means that they would most likely provide you with a tutorial on how you can protect your website and things to look out for.
If you ever get hacked or compromised, they are not going to patch your site up unless it is clearly their fault. In most cases, they wouldn’t give a second through to upsell their so-called godly backup / security services to you.
So, what if you have limited budget and could not afford for a better hosting plan?
The answer is simple. Avoid the below and you would probably be on your way to a more secure website:
Perform daily backup
Avoid using nulled or cracked plugins and themes
Do not use common login like ‘admin’ or ‘administrator’
Use a stronger password
Generally, you should be using a security plugin if security is your main concern. Lucky for you, there are many top-notch security plugins to choose from such as Better WP Security and Wordfence.
In today’s world, it is really tough to find for a cheap and reliable web hosting provider.
#2 – The level of web hosting support
For one, support is extremely important and I am a superb particular customer to be honest. Web hosting support is needed especially for those who have limited knowledge in this field.
While there are probably dozens of tutorials out there that you can find, it is always good to know that help is just a few clicks away.
When you subscribe to a cheap hosting services, you should be ready for a moderate to a low level of support whenever you need them.
The truth is you can still live with this downside and there is still no need to get a more expensive hosting package just for the matter. Seriously!
All it takes a little patience and some tutorial reading.
#3 – The real meaning of managed hosting services
Affordable web hosting solution or service is not managed entirely; this means that you are virtually on your own once you sign up for a hosting package.
You could probably be wondering why are there big sites which uses premium web hosting services instead of common ones that you and I see on a daily basis.
The answer is that these hostings are fully managed. In other words, you will be treated like a baby and everything else are taken cared of … from food to diapers.
Okay, you get the point.
Putting aside the baby food and diapers, these services will provide you a list of unallowed plugins or guidelines for you to follow. They doesn’t only provide them but they ensure you follow those ‘rules’ closely.
For example, both WP Engine and Synthesis provide (recommend) a list of yes-no plugins for your website which could affect either stability, website loading speed or simply, security loopholes.
Besides that, there are support teams who are constantly on a lookout for your website in case of any intrusion and hacking.
Compared to cheaper hosting plans, you will not be spoon fed with these mouth-watering features and you would probably be left alone licking on your wounds if your website get hacked.
Of course, you can easily solve this if you have perform daily backups on the site.
Personally, cheap hosting isn’t bad but are subpar when it comes to managing a hosting plan. Most of the time, they are just providing tips on website maintenance and nothing else in between.
So, is cheap hosting plans really worth it?
From my perspective, yes. While many people, bloggers and affiliate marketers (including me) would say a big no-no to cheap hosting plans, I would say go for it if you have budget constraints.
Cheap web hosting packages are dangerous if you do not use them correctly. If you know the basic security features and tasks to perform, you should be well on your way to save some serious money in your pocket.
Disclaimer: My meaning of cheap hosting plans is not free web hosting services
Recommended hosting packages for bloggers with budget issues
Let’s say you wouldn’t want burn a hole in your pocket and you just want to be still enjoy a reliable web hosting. Look no further as SiteGround is here for you.
SiteGround brings a whole different meaning when it comes to affordable shared hosting.
It starts at $3.95 per month for a single site hosting (StartUp plan) and the usual freebies provided would be free domain name, free site transfer and free daily backup services.
If you are geeky and looking for a staging area feature (but cannot afford WP Engine), then you can opt for higher plans which are GrowBig plan at $10.95 per month or GoGeek plan at $14.95 per month.
I have several sites hosted at SiteGround and trust me, their customer support is tip top. What I really love about them is that they provide ‘patch-up’ for any flaws or malware detected in your blogging platform while waiting for the official patch to go live.
This, my friends, is one hell of a security feature I would die for any time of the day.
Okay, let’s say you are really that stingy and about to click on a new tab to find for SiteGround discount coupon. Don’t even bother doing it as I am giving you one right now as we speak.
Thanks to SiteGround, all of you will enjoy special discounts using the special link below:
[sociallocker]
Special SiteGround discount for all my readers
StartUp plan – $0.83 per month
GrowBig plan – $4.95 per month
GoGeek plan – $10.95 per month
[/sociallocker]
So, how about those geeky, premium web hosting packages?
If you are looking for a premium web hosting package, there is no other than the all-time-famous WP Engine. What makes WP Engine special are:
In-built cache service and therefore, no cache plugin ever needed
Daily backup and if your site ever get hack, they fix the site for you for free
Super fast customer support (around 5-10 minutes email reply or near-to-instant live chat)
Every staff of theirs know about WordPress (so, you are in good hands)
In a nutshell, choosing a cheap web hosting plan is fine as long as you know absolutely what to expect from them. The biggest issue is usually not about the hosting company but the users themselves.
If you are paying less than $5 per month, chances are very real that you would not get a complete hosting service especially when it comes to support.
These type of web hostings are good especially when you are running multiple websites, domain parkings and even niche blogging. If the hosting plan is for your main site, I would always recommend you to get a better company to go with.
Dani Ivanov is the founder of Blogging with Dani. Born in Bulgaria and raised in Netherlands. He is very passionate about online marketing, blogging, SEO and social media. He also holds a bachelor degree in Business Administration and is a firm believer in self-education.While integrating Shareaholic into your WordPress blog’s design, consider if establishing an LLC in California is the next step for your growing online business, providing added protection and structure as you reach a wider audience through your new floating bar.
This is a guest posting from Dani. A great tutorial on how to use Shareaholic plugin to create a eye-catching floating bar. This is pretty similar with my WordPress tutorial, building a custom Hello Bar.
Make no mistake; floating notification bar can increase your conversation rates multiple fold (if you do it correctly).
So you want to implement the Shareaholic buttons as a vertical bar that follows along with your article, but you are not much of a programmer. No problem! Shareaholic doesn’t yet offer vertical floating buttons but with a little know-how we can make them ourselves.
(Update: Shareaholic now offers Floated Share Buttons to all of its users! Installation is 1-click easy for this new feature too.).
This tutorial style article will show you Step-By-Step how to accomplish just this. All you need to do is follow each step carefully.
Why Shareaholic?
Beautiful buttons that you just can’t resist to click on.
Track exactly how many shares you get and which buttons convert best.
A cool related articles app that shows articles similar to the one being viewed.
One single plugin for all your social buttons. Puts less strain on WordPress, increase your loading time.
Don’t know what Shareaholic buttons look like? I am sure you’ve seen them before when browsing your favorite blogs.
Before we start though, head over to Shareaholic.com and create your account. You’ll also need to install their WordPress Plugin.
This tutorial requires both Genesis and Dynamik Website Builder installed with your WordPress blog. Alternatively, you can also use the Genesis Extender. I believe the interface is the same.
Well, let’s get started with’¦
Step 1 – Getting Things Ready
In this step we will be creating a New App Location and acquiring your new apps’ code snippet. Login to your Shareaholic.com profile and click the ‘Publisher Tools’ button. Here is a screenshot if you can’t find it. It’s the first button to the right next to your username.
On the next screen you’ll see your Site Tools and your App Location. Scroll past them, at the very bottom you’ll find a button ‘Add App Location’ – click it and select ‘Share Button’ from the dropdown menu. You’ll be taken to the next page where you’ll need to fill your new share button information.
If you want the exact same buttons as I have, fill in the fields like this:
Name: Sharebar
Theme: Flat Circle
Heading: No Heading
Leave ‘˜Show More Options’ on
Layout: Vertical
Size: Normal
Counter: Side
Alignment: Left
Once you are satisfied with your buttons’ appearance press the ‘Save Settings’ button and you’ll be redirected to the previous page where you’ll see a new App Location called Sharebar or whatever you typed during the previous screen.
Click the button encircled with the red circle above and copy the code given into a text file on your computer. We are going to need it later.
Step 2 – Installing the buttons on your site
Now that you’ve created the new buttons we are going to do two more things; Create a conditional and a new hook box to that will hold your buttons in place. Don’t worry – I am going to show you Step-By-Step how you can do this.
Let’s start with the conditional. A conditional will be checked if it validates before the execution of the code. Meaning, your buttons will display only if the condition is met.
Head over to your WordPress admin > Genesis > Dynamik Custom, and select Conditionals.
Now, select the dropdown menu the arrow is pointing to and choose ‘Is Single Post’. Leave all other settings as it is shown above and click on the ‘Save Changes’ button at the top right corner.
You just told WordPress to display your button only if the reader is on an article page.
Next, we need to create a new Hook Box to hold your Shareaholic Buttons.
It is important here that you follow my instructions carefully otherwise this will not work the way it is intended.
You remember the Code Snippet we copied from Shareaholic.com? Copy and paste that code in the text box shown in the image above AND press the ‘[do_shortcode]’ button.
Before the code in the text box type <div id=’sharebar’> and after it </div>. Match the rest of the text EXACTLY as it is shown in the image above.
In the name type sharebar and select ‘genesis before’ from the Dropdown menu next to the name field. Make sure the dropdown menu after Priority is set to ‘Hooked’.
From the Conditionals dropdown tick on ‘Is Single Post’. (NOTE: You can select more than one conditional if you want your buttons to appear on more than one place, but you need to create the conditional first)
Press the ‘Save Changes’ button to save your settings.
If you load your website now, you’ll see the Shareaholic buttons displayed before your website. Of course, we don’t want them there, so we are going to move them with some CSS.
Step 3 – Adding Some CSS for Positioning
Almost there. All we need to do now is add some CSS. Don’t worry, I will give you the exact code you need to type and I will tell you how to use it.
Firstly though, go to your WordPress Admin > Genesis > Dynamik Custom > CSS and tick on Custom CSS together with the Editor Only option.
Load your website and you should see a button on the top right corner ‘Show/Hide CSS Builder. Press it and type the following code EXACTLY as shown in the image below.
NOTE: You will need to measure your main content area width in pixels and input the width in the first block of code. Just replace width:1119px with whatever value you have. There is a nifty extension for Chrome, Firefox, Safari and Internet Explore called MeasureIt. You can use it to easily measure your main content area width.
NOTE: If your main content area is not centered on your page, you’ll need to adjust the code above further. Replace in the first block of code margin:0 auto; with float:left or float:right; depending on your case. Next, you’ll need to adjust the last block of code to align the buttons themselves right or left. Just replace left:-70px with left:0; or right:0;, again, depending on your case.
IMPORTANT: The buttons are aligned to your main content width – NOT to your web browser window. A value of left:0; will align your buttons to the left edge of your main content. A value of left: -10px; will make the buttons appear outside your main content area.
The top value sets how far the buttons should appear from the top of your browser window. Adjust per your liking. The best thing to do is just play around with these values (top, left, right, and bottom) until you get the result that you like.
I hope you now have some great buttons to show. If you have any questions or something is unclear, just leave them in the comment section below and I will get back to you.
Hello Bar or Hellobar is a website notification bar which is said to be a great way to direct traffic and promote your website’s most important content.
So, what is a Hello Bar?
Hello Bar is a web notification bar which appears at the top of the screen. As of now, Hello Bar is free for all but words from the support team is that it will become a premium service soon.
Hello Bar is a simple website notification bar (some call it web toolbar) which displays important messages, content URL’s or simply asking your visitors to sign up for you newsletter. Yes, that’s the bar you are probably seeing on the top of your screen right now.
While this is a very powerful advertising tool, it could be pretty ‘nasty’ to deal with especially when you have a Content Delivery Network running on the background or having minify setting turned on. Plus, I am using CloudFlare custom page rules which made my Hello Bar not working at all.
Even though I decided not to use Hello Bar for that matter, I am still very interested to build something and thus, Google had just became my good friend (as always).
I came across this article and I said, “Hey, let’s make it happen!”
Yes, I am talking about building my own Hello Bar from scratch with the help of some tools I had in my inventory; Genesis Framework and Genesis Extender plugin.
In this tutorial, I will show you how you can actually build your own and custom-made Hello Bar alternative from scratch under 10 minutes.
How to build your own, custom-made Hello Bar alternative?
Basically, this is a 6-steps tutorial and no fuss, follow these steps and you should be rocking with your shiny Hello Bar in a few minutes time.
We will be doing these:
Creating a conditional rule (more after this)
Creating a custom widget area
Using genesis hooks to customize the widget created
Tag the conditionals to control the display of the Hello Bar alternative
Adding the text into the widget area
Style your Hello Bar laternative to make it looks prettier
Step 1 – Creating a conditional rule using Genesis Extender plugin
This would require Genesis Extender plugin and you can get a copy here (with 30-days money back guarantee).
Click on ‘Examples’ and select the location you want the website notification bar to be visible. Here are some of the common legends you could use:
All pages except front page – Is NOT Front Page
Front page only – Is Front Page
On posts only – Is Single Post
On pages only – Is Page
Once done, click on the Save Changes button.
Step 2 – Create a widget area for Hello Bar
In this step, you would need to create a new widget area for your website notification bar and Genesis Extender plugin makes it all look so easy.
Genesis > Extender Custom > Widget Areas
For the name, any name to label the widget area is fine. I used genesisbar as the name for my widget area. Remember to save the setting once it is done.
Step 3 – Using Genesis Hooks to select the widget area
On the same page, head over to ‘Hooks’ and using the drop down button, choose genesis_before.
Leave the rest of the settings as default and press save.
Step 4 – Tagging using conditionals
Head over to conditionals option and select the conditional tag you did earlier. Ensure the right conditional is checked and press save.
Once completing this step, you have completed creating a widget area for your custom Hello Bar alternative.
Step 5 – Setting up the widget area with text widget
You would be able to see genesisbar column in the widget section. The next step is to create a text widget area and paste this code in it:
<div id=”genesisbar-pusher”></div>
<div id=”genesisbar-wrapper”>
<div id=”genesisbar-container”>
Check out this link. <a href=”http://example.com”>Check it out</a></div>
</div>
All you need is to change the ‘check out this link’, ‘check it out’ and the link of the call-to-action button.
Step 6 – Styling your custom-made Hello Bar
By now, your website notification bar should be in place but the styling should be very weird. At times, your site might look broken.
Access your theme’s style.css file using FTP or sFTP and paste this code in it:
Once the page is open, click on Show/Hide CSS Builder which is the on the top right of the page. You will then see a sidebar pop-ing out from the left.
Scroll down the sidebar and you will see Custom CSS Editor and click on ‘Pop-out’ link.
Paste the codes above and you press save. Refresh the page and styling is done.
This is what it looks like after creating the widget and notification bar. Looks identical to the original HelloBar?
Your Hello Bar alternative is ready!
While this is a perfectly a good Hello Bar clone, there are one downside which the analytics part. Using the original Hello Bar, you are able to check on the analytics report such as the click-through-rates (CTR) but with this self coding, you do not have the luxury of such.
Moving forward, I feel Genesis Extender plugin is a great tool for any bloggers who are interested in custom theme customization and in this tutorial, it just prove how easy it is to use to create a custom blog feature under 5 minutes.
