If you're looking to enhance your website's design, I suggest utilizing a plugin like https://wordpress.org/plugins/wp-add-custom-css/ or leveraging the WordPress Customizer "Additional CSS" field.
Regarding the specific question at hand, creating a custom page template for CSS modification is relatively straightforward. To accomplish this, you'll need FTP access and a code editor to craft the template before transferring it to your theme folder (preferably within a child theme to avoid losing changes during updates).
The designated name for my CSS page template was: css-page.php
This template simply requires an opening php tag to function correctly.
Here's the code snippet for the css-page.php template:
<?php
/**
*
* Template Name: CSS page
* Not a recommended idea.
*
*/
header("Content-type: text/css; charset: UTF-8");
ob_start("compress");
//minify CSS
function compress( $minify ) {
/* remove comments */
$minify = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $minify );
/* remove tabs, spaces, newlines, etc. */
$minify = str_replace( array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $minify );
return $minify;
}
//get the content
if (have_posts()) :
while ( have_posts() ) : the_post();
$content = get_the_content();
$content = wp_filter_nohtml_kses( $content );
echo $content;
endwhile;
endif;
ob_end_flush();
To implement this custom CSS page template, add the following code snippet to your functions.php file in your child theme or a related custom plugin, ensuring to make the necessary adjustments as indicated:
Replace the value p='3134' with the respective page ID where the template will be applied, and modify or remove the id="something" attribute according to your preferences to facilitate any JavaScript manipulation.
Code for functions.php:
//Get CSS page contents
function myprefix_page_css() {
echo '<link rel="stylesheet" id="something" href="'. site_url() .'/?p=3134" type="text/css" media="screen">';
}
add_action( 'wp_head', 'myprefix_page_css', 99 );