Use a Wordpress Page as a stylesheet? - css

Question

I'd like to be able to edit my WordPress theme's CSS by using a Page in the backend instead of the default style.css file. I've seen it done before as a page template but I can't seem to figure it out myself.
I'm using WordPress version 4.7.2 on a Multisite. I want the CSS to generate on theme activation, hence using a Page.
I apologize in advance if this is an easy fix and open to other ways to accomplish this. Thanks!

Answer 1

I highly recommend using a plugin, such as https://wordpress.org/plugins/wp-add-custom-css/ or use the WordPress Customizer "Additional CSS" field.
However, to answer your question, this was easy since it's a modified way that I make some pages I load with ajax. You will need to create a page template and that requires FTP and a code editor to create the page and then push it your theme folder (hopefully a child theme or this template will go away when you upgrade).
I named my CSS page template: css-page.php
It requires only the opening php tag.
CODE for template css-page.php
<?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();
Then in your functions.php file in your child theme (or an include of that file or a custom plugin) paste in the following BUT change it where noted:
Change the value p='3134' to your page id where you're using this template. Change the id="something" to something else or remove it. Useful to have an id or a class for js manipulation.
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 );