0

I would like to include some css to highlight some text in post

like

 <span class="highlight">mark word</span>

where should i define highlight so that i can use it.

1

The easiest way in most recent themes is to use the Custom CSS from the Theme Customizer. If it is enabled in your theme, you can access it through: Appearance -> Customize.

If it's not enabled, you should first refer to your theme's documentation. Is it a free or bought theme?

2
  • I am using free theme
    – xrcwrn
    Feb 7 '17 at 7:17
  • So I'm gonna take it that the Customize option is not present in your theme. I would advise following @Chris H. Aus LE's solution, which is really the best way to go and will allow you to update your theme if needed in the future. Feb 7 '17 at 14:50
1

Before starting to change code in your main theme, you should definately create a Wordpress Child Theme. That way, updates to your main theme will not overwrite changes you made to the theme files.

Check this Wordpress tutorial on how to create a child theme: https://codex.wordpress.org/Child_Themes

Basically, it breaks down to - create a folder for your child theme - in that folder, create a file "style.css" - in that file, you overwrite the parent style's CSS classes to style the output to your liking.

Your style.css should start with the following code block:

/*
Theme Name:   Your child theme name
 Description:  The description of your child theme
 Author:       SEOmann.de
 Author URI:   https://seomann.de
 Template:     folder-name-of-your-parent-theme
 Version:      1.0
 Text Domain:  folder-name-of-your-child-theme
*/

And below that, you can define your classes to override parent classes:

span.highlight {
    color: green;
}
1

The easiest way if you're not that familiar with coding would be to add it to the custom CSS in Wordpress.

This can either be done by going to Appearance > Customise > Additional CSS.

Entertaining your styles in here 'should' override the theme styles your current theme is already using.

Failing that, you can always try adding !important to override styles further, although these should be avoided where possible.

0

Best way is to find child theme css file / Theme css file and add class to style.css. Dirty way is follows ;). Add following code in function.php

<?php
add_action('wp_footer','my_custom_css');
function my_custom_css()
   {
?>
<style>
.highlight{
// styles goes here
}
</style>
<?php
    }
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.