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>
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.
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><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:
]]>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.
]]> $(function(){
$('button').on('click',function(e){
e.preventDefault();
var imgSRC = $(this).data('src');
$('#image').html('<img src="'+imgSRC+'" alt="" />');
});
});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>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.