Internal CSS on WordPress page?

  • I don’t want to change the theme by having an external style sheet and I already know how to do inline css in WordPress, but how do I or can I implement internal css that usually is found in the head of a html page?

    Like the code below(as a generic example). Could it be on a single WordPress “edit page” and implemented but not seen on the actual page? 

    <head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
Viewing 11 replies - 1 through 11 (of 11 total)

  • You can do that in the post content itself. It won’t be in the head section, but it will work. It is better to keep styles separate from content, however, since content is used in feeds and can be displayed in other ways.

    Another way to do per page CSS is to look at the body classes (View Source on the page), and there will always be a unique class with the post ID in it. You can add styles for that class, if you want it to affect only that page. Or use the more generic classes like search or archive if you want to affect those. Put the CSS in the Additional CSS section of the Customizer (or use a plugin if you want to be able to switch themes and keep the styles). Or make a child theme and put the styles in the child.

    Thread Starter Gibbon355

    (@gibbon355)

    Thanks, Joy. I’m trying to figure out why my CSS is showing up on the page where everyone can see, plus it’s not working:

    https://jurassicgorilla.com/animals/cryptozoology/test-2/

    Here’s the code:

    .hidden{
	height: 0;
	width: 0;
}
 
.hidden:checked + img{
	display: none;
}
 
</style>
</head>
<body>
 
<label>
<input type="radio" class="hidden" name="name1" checked>
<img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/posters4.png" />
</label>
 
<label>
<input type="radio" class="hidden" name="name1">
<img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/printerhalf2.png" />
</label>

    You’re missing the open <style> tag. It should go before .hidden { … I would recommend you put custom css in a dedicated box, and not within page content. It gets messy, hard to maintain and error prone inside the editor.

    Have a look at this plugin:

    https://www.ads-software.com/plugins/wp-add-custom-css/

    Thread Starter Gibbon355

    (@gibbon355)

    Thanks, Crgeary. That works. Even after I fixed <style> the css still didn’t work correctly until I added the plugin and pasted the css in the box.

    Thread Starter Gibbon355

    (@gibbon355)

    Crgeary, would you also say that a plug-in for adding Javascript is recommended and, if so, could you recommend a plug-in?

    Moderator bcworkz

    (@bcworkz)

    If your goal is to have a style block in the head section of every page, you don’t need a plugin for that. Instead, just place the desired CSS in the Additional CSS panel of the customizer. No style tags, just the CSS rules.

    If you have simple, brief JavaScript to be part of a page, you can simply place it in post content using the text or code view. Be sure the JS is within script tags, and you must remove any blank lines in the code.

    For more extensive JS, it’s best to place it in an external file an enqueue it with wp_enqueue_script(). It’ll then be properly placed in relation to any other JS on the page. A hacky way to add script blocks to the head section is by hooking the “wp_print_scripts” action, but it’s difficult to control where it appears in relation to other script.

    Thread Starter Gibbon355

    (@gibbon355)

    Bcworkz, Thanks, I’m new to Javascript. Would the code below be brief enough to place in the text/code view?

    	$(function(){
		$('button').on('click',function(e){
			e.preventDefault();
			var imgSRC = $(this).data('src');
			$('#image').html('<img src="'+imgSRC+'" alt="" />');
		});
		});
    Thread Starter Gibbon355

    (@gibbon355)

    Right now, I’m not familiar enough with wp_enqueue_script() or wp_print_scripts to implement it. I’m trying to get this result https://jsfiddle.net/dipeshbeckham/Ku5pP/1/ with JS but am not getting images that show when buttons are clicked.

    Also, is Shortcoder Plugin the JS equivalent of the “WP Add Custom CSS” plugin? 

    <script>$(function(){
		$('button').on('click',function(e){
			e.preventDefault();
			var imgSRC = $(this).data('src');
			$('#image').html('<img src="'+imgSRC+'" alt="" />');
		});
		});
</script>
    • This reply was modified 6 years, 2 months ago by Gibbon355.

    Just for completeness, the reason your first style attempt did not work was because you included the /head and another body tag, making the HTML invalid markup.

    Scripts can be entered in the content if you have the unfiltered_html capability (admins do). But don’t switch between Visual and Text mode or it could mess up the script by inserting <p> tags in the wrong places.
    Your script changes an image tag from data to src attribute. But did you could the original to use data attribute? Are you sure you want the user to have to click to see the image? The script does not change it back, and it only works on a generic button that changes an image with an ID of image.

    Thread Starter Gibbon355

    (@gibbon355)

    Joy, Thanks. I’m trying to copy the ‘girl holding the white cards’ and the corresponding buttons in this link:

    https://www.printful.com/custom/wall-art/posters/enhanced-matte-paper-poster-in?size=8%C3%9710

    An image is always there but the default image is replaced by clicking different size-dimension buttons. I figured out a way to kind of simulate it with css but I am too new to Javascript to do anything but cut and paste code that JS users in past blogs say works. Ideally, I’d like to have the same effect of clickable buttons with corresponding images by using Javascript.

    Moderator bcworkz

    (@bcworkz)

    Your script is using jQuery. That does need to be enqueued with wp_enqueue_script(). It has been registered by WP core, just pass 'jquery' to the function. Call it from within a callback to “wp_enqueue_scripts” action.

    Also change all $ shortcuts in your script to jQuery because the WP jQuery runs in noConflict mode.

    I’m sure you are struggling with all of this. Hang in there, you’re close to pulling it all together. It’s a lot of new stuff all at once.

    FYI, Joy is correct about stray <p> tags possibly getting tossed in when switching to visual view. That’s why I told you earlier to remove blank lines. No blank lines == no <p> tags ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Internal CSS on WordPress page?’ is closed to new replies.