Title: Custom CSS without plugin Last modified: November 1, 2017 --- # Custom CSS without plugin * Resolved [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/) * Greetings, I’m loving WordPress! I have figured out most of what I need to know, it’s so simple to use. I do have one question, though. * 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: * `
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
` * 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 `
` every time I want to post a tip note. * Thoughts? * Thank you 🙂 - This topic was modified 8 years, 7 months ago by [James Huff](https://wordpress.org/support/users/macmanx/). - This topic was modified 8 years, 7 months ago by [stephencottontail](https://wordpress.org/support/users/stephencottontail/). Reason: added code tags Viewing 12 replies - 1 through 12 (of 12 total) * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9639586) * Many thanks to stephencottontail and James Huff for helping to get the code in the OP visible to others. You folks are appreciated. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9639849) * Code-wise, no. * 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](https://chrome.google.com/webstore/detail/auto-text-expander-for-go/iibninhmiggehlcdolcilmhacighjamp?hl=en-US) - This reply was modified 8 years, 7 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). - This reply was modified 8 years, 7 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9640419) * See [https://i.imgur.com/ZkXzfcQ.png](https://i.imgur.com/ZkXzfcQ.png) * [[ * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9640946) * The forum system botched my original question. I need to be able to enter: * `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.` * It’s the `
` and the ending `
` tag that I need to automate. or I could make it `` with a ` ` 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 `` .. 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. * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641251) * > 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](https://codex.wordpress.org/Shortcode_API) for `[mytipnote]content[/mytipnote]` * That could output the HTML you showed above. * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641288) * Steve Stern, Yes, a shortcode would work perfectly for this. Thank you very much! * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641358) * ``` add_shortcode( 'mytipnote' , 'revian_mytipnote' ); function revian_mytipnote( $atts, $content ) { $a = shortcode_atts( array( 'extra_class' => '', ), $atts ); return '
' . $content . '">
'; } ``` * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641411) * Steve Stern, Thank you! I actually had the shortcode implemented after reading the shortcode api page that you linked. I used to design web pages, with css, from scratch in a text editor, and I’m already familiar with php, so this was quick and easy. Thank you very much for your help and for pointing me to the shortcode api page. I love WordPress! 🙂 * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641496) * This works perfectly for the shortcode implementation (added to functions.php in the theme folder): * ``` function tipnote_shortcode( $atts , $content = null ) { return '
' . $content . '
'; } 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. * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641554) * Now that I’ve successfully added the shortcode, what would I need to do in order to add a button in the editor so I don’t even need to type in the shortcode? Just click a button for the shortcode the same way you do for a normal blockquote. I’m guessing this involves adding functions to php files in the theme folder, which is fine with me. * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641568) * see [https://paulund.co.uk/add-button-tinymce-shortcodes](https://paulund.co.uk/add-button-tinymce-shortcodes) * Thread Starter [Revian](https://wordpress.org/support/users/revmacian/) * (@revmacian) * [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641600) * Steve Stern, Dude, you ROCK! Thanks again! I’ve bookmarked that site as it has other tutorials that interest me. Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Custom CSS without plugin’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 12 replies * 3 participants * Last reply from: [Revian](https://wordpress.org/support/users/revmacian/) * Last activity: [8 years, 7 months ago](https://wordpress.org/support/topic/custom-css-without-plugin/#post-9641600) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics