Disclosure: Some of the links to products in this article are affiliate links. It simply means, at no additional cost to you, we’ll earn a commission if you click through and buy any product.
If you are a blogger and using WordPress as your blogging platform then this article will help you to reduce the number of plugins on your website by using some Useful Codes (HTML/CSS/JavaScript).
On WordPress, we are very much dependent on Plugins and due to the increase in the number of plugins the speed of the website slows down, and for higher ranking in Google SERP nowadays page speed plays an important role in ranking.
So if you want to reduce a load of plugins on your website and make your site lightweight then this article will help you to do so.
Note: Make sure to take a backup of your site before you make any changes to the theme file.
Useful HTML Codes
HTML Code For Telegram Channel Widget With Number Of Participants
See the Pen Telegram Subscriber Widget by Hex ToiD (@vikask2y2) on CodePen.
Replace the channel Username with your channel username.
HTML Code For Moving Text/Image
See the Pen Moving Text & Image by Hex ToiD (@vikask2y2) on CodePen.
Useful CSS Codes
Add a Background/Change Style To Bold Text In List
See the Pen Change Style Of Bold Text In List/Add Any Text After It by Hex ToiD (@vikask2y2) on CodePen.
CSS For Code Tag <code> TEXT </code>
See the Pen CSS For Code Tag <code> TEXT </code> by Hex ToiD (@vikask2y2) on CodePen.
CSS For Pre Tag <pre> TEXT </pre>
See the Pen CSS For Pre Tag <pre> TEXT </pre> by Hex ToiD (@vikask2y2) on CodePen.
Design List Items
See the Pen List Styling In a New Way by Hex ToiD (@vikask2y2) on CodePen.
Image CSS To Display Border & Image Hover CSS
See the Pen CSS To Display Border & Shadow On Hover Images by Hex ToiD (@vikask2y2) on CodePen.
Fix WordPress Table Size If It Exceeds
See the Pen Fix WordPress Table Size If It Exceeds by Hex ToiD (@vikask2y2) on CodePen.
CSS Code To Decorate Headings
See the Pen CSS Code To Decorate Headings by Hex ToiD (@vikask2y2) on CodePen.
CSS Code To Decorate Headings 2
See the Pen CSS Code To Decorate Headings 2 by Hex ToiD (@vikask2y2) on CodePen.
CSS Code To Decorate WordPress Buttons
.wp-block-button .wp-block-button__link {
font-size: inherit;
line-height: inherit;
box-shadow: 0px 7px 10px 0 rgb(0 0 0 / 33%);
border: 5px solid #fff;
color: #fff;
padding: 10px 10px;
margin:5px;
}CSS Code To Decorate Blockquote
blockquote {
box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;
border: 5px solid #0E8C05;
padding: 20px;
margin: 0 0 1.5em;
position: relative;
font-size: 18px;
}CSS Code To Decorate Column
.wp-block-columns {
box-shadow: 0px 7px 10px 0 rgb(0 0 0 / 33%);
padding: 10px;
border-radius: 7px;
border: 3px solid #285529;
}
.wp-block-columns strong {
background: #000;
color: #fff;
padding: 0px 10px 0px 10px;
text-align: center;
border-radius: 0px 15px;
display: inline-block;
}CSS Code To Disable Right Click & Copy Paste In WordPress Website
See the Pen CSS Code To Disable Right Click & Copy Paste In Website by Hex ToiD (@vikask2y2) on CodePen.
CSS To Decorate Yoast SEO FAQ Schema
.wp-block-yoast-faq-block {
background: #f3f4f5;
border-radius: 5px;
padding: 15px 15px;
}
.wp-block-yoast-faq-block .schema-faq-answer {
overflow: hidden;
background: #f3f4f5;
border-radius: 5px;
margin-bottom: 10px;
padding: 15px 15px 20px;
box-shadow: 0px 0px 5px #d9d9d9, 0px 0px 40px #ffffff;
}
.wp-block-yoast-faq-block .schema-faq-answer:hover{
box-shadow: 0 0 5px #00444c;
}CSS To Decorate Rank Math FAQ Schema
#rank-math-faq {
background: #f3f4f5;
border-radius: 5px;
padding: 15px 15px;
}
.rank-math-list-item {
overflow: hidden;
background: #f3f4f5;
border-radius: 5px;
margin-bottom: 10px;
padding: 15px 15px 20px;
box-shadow: 0px 0px 5px #d9d9d9, 0px 0px 40px #ffffff;
}
.rank-math-list-item:hover{
box-shadow: 0 0 5px #00444c;
}CSS To Decorate Rank Math How To Schema
#rank-math-howto{
background: #f3f4f5;
border-radius: 5px;
padding: 15px 15px;
}CSS To Remove Website Field From In Generate Press
.comment-form #url {
display: none;
}CSS To Remove Padding From List In Generate Press
.entry-content ol li {
margin: 0 0 0.5rem 0;
position: relative;
}
.entry-content ul, ol {
margin-left: 1em;
}Replace Class/ID because it might be different depending upon your theme
Useful JavaScript Codes
JavaScript Code To Redirect Blogger Website To Another Website/URL
<script type="text/javascript">
var d='<data:blog.url/>';
d=d.replace(/.\/\/[^\/]/, '');
location.href = 'https://www.hextoid.com/';
</script>
JavaScript Code To Redirect Blogger URLs To Another Website URL
<script>
if(window.location.href == 'https://www.hextoid.blogspot.com/2020/12/blogger-post-link.html')
{
window.location="https://www.hextoid.com/wordpress-post-link/";
}
</script>
Replace The URLs With Your Site URLs. For More Visit https://www.hextoid.com/redirect-blogger-url/
How To Add Custom CSS In WordPress Website?
There are many different ways and tools to Add Custom CSS in WordPress but here I’m going to share 3 simple methods using which you will be able to add custom CSS to your WordPress website.
#Method 1
- Log In To Your WordPress Dashboard
- Navigate To Appearance > Customize > Additional CSS
- Paste The CSS Code You Want > Click Publish When You Are Done
#Method 2
- Log In To Your WordPress Dashboard
- Navigate to Plugins > Add New > Search “Simple CSS” > Install & Activate It
- Go To Appearance > Simple CSS > Enter Your Code > Save CSS
#Method 3
- Log In To Your WordPress Dashboard
- Navigate To Appearance > Theme Editor
- There Will Be a style.css Name File
- Here You Can Enter Your Custom CSS
Wrap Up
I’m assuming that these simple codes will help you to make your website attractive and lightweight by reducing the number of plugins on your website. If this article is useful then make sure to share it on Social Media.
Happy Blogging!
![How To Use Download Timer in WordPress [Show Content/Download Button After Timer]](https://www.hextoid.com/wp-content/uploads/2022/10/how-to-use-download-timer-in-wordpress-768x432.webp)
