Have you ever come across a blog or website and thought “Wow, I really want these custom features on my blog too!”? Do you use a free WordPress plan but still want to add certain features to make your blog/website a bit unique? Do you have your own domain but use a free WordPress theme with little flexibility? This article is for you!
It’s a well-known fact that many bloggers and brands use WordPress to set up their blogs and websites. Developers also use the platform to create custom websites for their clients, so there are A LOT of WordPress themes out there. Most paid themes are very flexible and come with options to add custom features.
Free themes do not offer these options BUT there are ways you can still customise the theme and make your website look unique. At the end of this article, you’d know how to add custom features to your website, where to add it and also 5 features you can add to your website!
BUY NOW:
HOW and WHERE to add custom features
The “Custom HTML” option provides you with the ability to write HTML codes (with inline CSS) and it can be found under the ‘Widgets‘ section. Most themes have at least a sidebar and footer widget area, hence we’d be working with the sidebar widget area.
Do not worry if you’re unfamiliar with HTML or CSS. This article will include complete codes for the five features we’d be working on.
I share some tutorials on learning HTML and CSS for bloggers on Instagram, you can check it out if you want to know more about HTML, CSS and how to maximise it to make your website better.
To find the widgets and custom HTML option, follow these steps:
1. For websites/blogs using Free WordPress plans:
– On your WordPress.com dashboard, navigate to “Design >> Customize”. This opens the Customizer.
– Click on “Widgets” on the sidebar. This opens up a view where you can see the number of widget areas your theme accepts and a list of the locations.
– Click on any of the locations and click the “Add a widget” option
– Scroll to the “Custom HTML” option or perform a search using the search bar and click to add.
– Afterwards, the widget appears in the location and you can customise as desired.
2. For websites with custom domains (using WordPress.org)
– On your WordPress Admin dashboard, navigate to “Appearance >>Customize“. This opens the Customize page.
– The rest of the steps are same as above.
5 Features to Add With Custom HTML and CSS
With HTML and CSS, you can add several custom features to your sidebar and footer sections. The limitation is that you cannot add these custom features to sections like the header, middle of posts, etc.
However, you can maximise the sections available and add all the features you want.
1. ‘About Me’
Every blog/website needs an About section (‘About me’, ‘About the brand’, etc). Here’s the “About Me” section for my blog:
And this is the code you can add to the custom HTML widget to get it:
<div style="text-align: center">
<img style="border-radius:50%" src="https://www.khairahscorner.com/wp-content/uploads/2020/11/khairahscorner-profile-about-scaled-e1606464989817.jpg" width="500" height="auto" alt="Me"></div>
<p style="padding-top:5px;text-align:center;font-style:italic;">
<div style="border:1px solid whitesmoke;margin-bottom:10px;"></div>
A Frontend Engineer & Content Creator of all things Modest Fashion, Lifestyle and Skincare.<br>
<div class='entry-btn' style="padding-top:10px; text-align:center">
<a href='https://www.khairahscorner.com/about-blog'>Learn More </a> </div>
</p>
</div>
2. Custom Ads
This is one of the ways to make money from your blog. Personally, I don’t have any brand/account advertising on my ad board yet but I used the same feature for my affiliates and referrals section.
You can put up an ad on my blog for your brand, business or blog, at a very affordable fee! Kindly check out this page for more information and then reach out to me.
The codes:
<div class='entry-btn' style="padding-top:10px; text-align:center">
<div style="text-align: center;">
<a href="https://zudo.co/?aff=1314" rel="nofollow">
<img src="https://www.khairahscorner.com/wp-content/uploads/2021/01/shop-zudo-jewelry-referrals-affiliate-khairahscorner.gif" width="500" height="500" border="0" alt='zudo-affiliate'>
</a></div>
3. Sell your Products
You can create a section to showcase your products or services. Typical examples include adding a brief summary and ‘Shop’ button for eBook products or a booking a consultation for a particular service, etc.
Code:
<div class="links">
<p style="font-size:14px; font-weight:bold;margin:0">
For Local Payments, Click below: </p>
<div style="text-align: center">
<a href="https://paystack.com/buy/khairahscorner-ebook">
<img alt='khairahscorner ebook design develop wordpress blog website self hosted' width="500" height="auto" src='https://www.khairahscorner.com/wp-content/uploads/2020/08/ebook-guide-design-develop-fully-self-hosted-optimised-wordpress-blog-full-details.gif'>
</a>
</div>
4. Announcement Board/Giveaway Notice
If you organise giveaways often or you have giveaway collaboration with brands, you can use this feature to announce your winners or share any details you’d like to share to participants.
You can design it using the same code as above.
BUY NOW:
5. Profile Shout-outs
You can also add profile or account features. This could be a paid promotion for brands, Instagram/YouTube accounts or anyone who wants to promote their accounts on your blog. This is an example of me promoting my Pinterest account:
Code:
<div style="text-align: center">
<a href="https://www.pinterest.com/khairahscorner">
<img width="500" height="auto" src="https://www.khairahscorner.com/wp-content/uploads/2020/07/72C555DC-5F8B-4D47-AC53-C9A0F1F90CE7.jpeg" alt="pinterest board khairahscorner">
</a>
</div></div>
Summary
There are a lot more features that can be developed and added to any theme! The codes are just a bunch of basic HTML tags with CSS styling and can be used for anything. Despite the limitations, there’s a lot you can do to make your blog stand out.
Thank you for reading! Let me know what you think of these features and which ones you’d be adding to your blog. If you used the codes, please leave a comment so I can check out your new pages too!
If you have any issues with the codes, you can also leave a comment and we’ll solve it together.
With Love,
JOIN ME ON:
Instagram | YouTube | Twitter | Pinterest | Quora | LinkedIn | Bloglovin’
