I am trying to figure out how to add custom CSS to my pages and have come up with the following:

When editing a page in the page editor (TinyMCE?) I write this:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>

Then, in my CSS stylesheet I wrote this:

blockquote.tip-note {
    color: #313131;
    background: #dfffd9;
    border: 1px solid #a2cc99;
    border-radius: 0px;
    padding: 6px 14px;
    padding: 0.429rem 1rem;
    font-size: 14px;
    font-size: 1.0rem;
    font-style: normal;
}

This does exactly what I wanted to do – complete with the styling. I works perfectly! However, I can’t help wondering if there is an easier way. I don’t want to use a plugin for this.. I’m just wondering if there is a way to do this without having to write <blockquote> every time I want to post a tip note.

Thoughts?

Thank you ??

You can go to the “Visual” editor and press the " quote button, which generates the blockquote HTML element.

Or you can consider a browser extension to help you reduce repetition when writing code, like this: https://chrome.google.com/webstore/detail/auto-text-expander-for-go/iibninhmiggehlcdolcilmhacighjamp?hl=en-US

<mytipnote class="tip-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</mytipnote>

It’s the <blockquote class="tip-note"> and the ending </blockquote> tag that I need to automate. or I could make it <mytipnote class="tip-note"> with a </mytipnote> tag to end the styling instead of blockquote.

There is a button for block quotes so it follows that I should be able to add something for <mytipnote class="tip-note"> .. otherwise WordPress wouldn’t be able to style anything as a block quote when we press the blockquote button.

I realize this may involved editing core WordPress files and I cam comfortable with that.

I know this is possible, I just need to learn how to do it.

I realize this may involved editing core WordPress files and I cam comfortable with that.

DO NOT EDIT CORE WP FILES.

What you probably want to do is create a shortcode for [mytipnote]content[/mytipnote]

That could output the HTML you showed above.

function tipnote_shortcode( $atts , $content = null ) {

	return '<blockquote class="tipnote">' . $content . '</blockquote>';

}
add_shortcode( 'tipnote', 'tipnote_shortcode' );

And this works perfectly for the CSS styling:

blockquote.tipnote {
    color: #313131;
    background: #dfffd9;
    border: 1px solid #a2cc99;
}

I’m adding the above information in case it should be useful to someone in the future.