Custom Heading Style Formats to WP Visual Editor Without Plugin
1

Add Custom Heading Style Formats to WP Visual Editor Without Plugin (RainaStudio Map 101)

Are you a blogger? Do you want to add multiple custom heading style formats for your articles or in page content? Yes! You landed on the right page. Today, in this post, you going to learn how you will add some custom heading style formats to WP visual editor.

If you would use any of the drag and drop content builder, you got noticed there is an element called “Custom Heading.” With this element, you can add optimized content headings with attractive colors, font family, and font-weight.

I tried to add such an element for content or article. If you don’t use any content builder for your WordPress website yet you want a feature like this, go through this post. 🙂

Oh!!! You may don’t know; this is one of the articles of RainaStudio Map 101 blog series. You can check out previous posts of this series.

Custom Heading Style Formats in the Genesis Framework

We are using the Genesis Framework child theme for our personal and client projects. So, most of the experiments we went through using this popular framework. The following screenshot is the demo of custom headings on our website.

Custom Heading Style Formats Demo

Demo: Custom Heading Style Formats

Let’s get hands dirty with code. We are using FontAwesome Icon font for the icons before each heading. Install FontAwesome icon font on your website, including this piece of code into functions.php file.

The following code is to enable hidden TinyMCE “Formats” buttons. If you use the Genesis child theme, add below code snippet in your child theme’s functions.php file.

Save the file, visit Posts > All Posts > Post[Edit], and You’ll notice the TinyMCE Formats button to WordPress visual editor like the following image.

TinyMCE Formats Button

We are going to add custom heading styles to the drop-down menu of this button. Add the following code to functions.php file.

Custom Heading Formats ItemHere you go, we got all of our custom heading formats like the screenshot here on the left. Check yours.

When you edit any article or content and want to add custom headings to that article, select all text of the heading. Click one of the heading formats in the drop-down menu to shape it as you want, after writing down your title.

Before doing that, we need to add some CSS code to style.css file of your child theme. Open the file and include the following code in the data.

 

We are done adding code to our theme’s file for custom heading style formats. Edit article, add as much as custom headings and sub-headings you want, make it colorful and enjoyable.

Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

  • Jisam says:

    Great article! Keep it up……

  • >