1 / 16

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

Adding custom heading style formats to WP visual editor without a plugin is easier. All you need to add some functions to function.php file of your theme or child theme. Integrate FontAwesome for icon and some CSS style. This tutorial uses Genesis Framework WordPress template.<br>[ https://rainastudio.com/custom-heading-style-formats/ ]

margiermann
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Custom Heading Style Formats in the Genesis Framework

  4. Custom Heading Style Formats in the Genesis Framework 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.

  5. Custom Heading Style Formats in the Genesis Framework 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.

  6. Custom Heading Style Formats in the Genesis Framework 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.

  7. Custom Heading Style Formats in the Genesis Framework We are going to add custom heading styles to the drop-down menu of this button. Add the following code to functions.php file.

  8. Custom Heading Style Formats in the Genesis Framework

  9. Custom Heading Style Formats in the Genesis Framework

  10. Custom Heading Style Formats in the Genesis Framework

  11. Custom Heading Style Formats in the Genesis Framework

  12. Custom Heading Style Formats in the Genesis Framework 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.

  13. Custom Heading Style Formats in the Genesis Framework

  14. Custom Heading Style Formats in the Genesis Framework

  15. Custom Heading Style Formats in the Genesis Framework

  16. Custom Heading Style Formats in the Genesis Framework 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.

More Related