How to add the Stylish Headings in WordPress without plugins

How to add the Stylish Headings in WordPress without plugins

One of our blog Reader recently Ask me He Wants to add the Stylish Headings in WordPress without plugins Mostly we are seeing the Stylish Heading in SML blog so in this article today we are going to see about How to add the Stylish Headings in WordPress without plugins.

Just Follow our Below Steps carefully

• Login to your WordPress Dashboard
• Go to Appearance > Editor > functions.php (open the current themes function.php file)

Learn How to add Custom Function’s in WordPress website without touching a WordPress theme

• Just copy and paste the Below PHP shortcode code on functions.php and save it

function note_box($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<div class="note_box">'.$content.'</div>';
}
add_shortcode('note', 'note_box');

• Now add the Below CSS code on your WordPress theme stylesheet Appearance > Editor > style.css.if your theme has a built-in option for Add a custom CSS box means paste this below code in that box or Learn how to add a custom CSS in WordPress websites

.note_box {
border: 1px dashed #C7C7C7;
padding: 3px;
box-shadow: 2px 2px 5px;
padding-left: 10px;
margin-bottom: 7px;
border-radius: 10px;
border-bottom-color: #000;
background: rgba(218, 218, 218, 0.04);
border-bottom-right-radius: 100px;
}
.note_box:before {
 font-family: FontAwesome;
 position: relative;
 content: 'f02d';
 text-shadow: 0px 0px 0px #000;
 color: #000;
 font-size: 17px;
 padding-right: 10px;
}

• That’s all successfully we completed the installation Process   🙂

How to use on our Blog posts?

Just use this below shortcode to show your Stylish Headings in posts after that check the preview and see the magic  🙂

[note]Your Example Text[/note]

It will attract your blog visitors and also increase your website traffic  🙂

Here some cool CSS Stylish Headings for you

Style 1

.note_box {
padding: 3px;
padding-left: 10px;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-color: #FEBD17;
border-radius: 9px;
box-shadow: 2px 2px 2px;
border: #000 1px solid;
}
.note_box:before {
font-family: FontAwesome;
position: relative;
content: 'f061';
font-size: 17px;
padding-right: 10px;
}

Style 2

.note_box {
padding: 3px;
text-shadow: -1px -1px 0px #000000;
box-shadow: -2px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
}
.note_box:before {
font-family: FontAwesome;
position: relative;
content: 'f02d';
text-shadow: 0px 0px 0px #000;
color: #000;
font-size: 17px;
padding-right: 10px;
}

Style 3

SML Old heading style:-D

.note_box {
background-color: #e3f0f2; background-image: url(http://www.shoutmeloud.com/wp-content/plugins/custom-post/lib/images/note.png); background-position: 7px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(102, 204, 204); color: #111111; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 14px; line-height: 21.983333587646484px; margin-bottom: 1.571em; padding: 10px 10px 10px 45px;
}

Style 4

.note_box {
padding: 3px;
text-shadow: -2px -1px 1px #060606;
box-shadow: -3px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
background: #303030;
color: #F7F7F7;
}
.note_box:before {
font-family: FontAwesome;
position: relative;
content: 'f054';
font-size: 17px;
padding-right: 10px;
}

Add your Custom CSS

.note_box {

Your custom CSS
}

Final words

A Simple to Method to shown the Stylish Headings in WordPress without plugins Everytime Trusting Plugin is Bad idea this Method Helps to shown the Stylish headings on your WordPress post it Helps to attract your blog post readers.

If you Need Any help Please Free to comment here, our team will help you.