Entering custom html

Hi Sysop-

You can use Custom HTML by switching to the “Text” tab at the top-right of your editor window:

Hi Dan-

This is happening because whenever the visual editor is initialized, it runs a scan of all the content you entered into the Text editor and checks it for “valid” HTML markup, sanitizing elements that aren’t included in the HTML5 standards.

Since your custom <dpc> tag isn’t a standard HTML tag, it strips them out. This is built into the TinyMCE editor in WordPress, not specifically the BoldGrid Post and Page Builder. I can think of two ways you can solve this.

First, you could solve it with pure CSS. I checked out your blog, and it looks like you’re mainly using the drop-cap on the very first letter of each post. If that’s consistent, you could accomplish the same thing with the following Custom CSS (I copied these styles from your <dpc> element):

body.single-post .entry-content p:first-of-type:first-letter {
    line-height: 33px;
    font-size: 50px;
    font-family: Georgia;
    color: #222222;
}

This code targets:

• Just blog posts (not pages) with the body.single-post class
• Just the post content with the entry-content class
• And finally, the first letter of the first paragraph, with the p:first-of-type:first-letter pseudoclass.

If, on the other hand, you’d like to be able to use your <dpc> tag in more places throughout your posts, you can add it to the allowed tags for TinyMCE. This will take a little bit of custom code. I recommend using the Code Snippets Plugin to manage custom code snippets.

Once you’ve installed the plugin, you can use a filter like the one found on this StackExchange Post to add the tag:

add_action('init', function() {
    global $allowedtags;
    $allowedtags['dpc'] = array();
});
add_filter('tiny_mce_before_init', function($a) {
    $a['extended_valid_elements'] = 'dpc';
    return $a;
});

Hi Dan-

Glad to hear one of those options worked for you! Let us know if you have any more questions, we’re happy to help.