CODEWITHSUNDEEP
phpwordpress
WeDevelop
WeDevelop

Reputation: 117

Save Additional css in separate file dynamically - Wordpress

When we customise the page in WordPress, it shows Additional CSS option in left panel, Customizer settings are saved by hitting the ‘Save & Publish’ button. This also saves our custom CSS added in the Additional CSS section, This custom added CSS is placed in the HTML head section on the frontend so that the changes can be applied to the frontend. (Can be checked by viewing the source code from the frontend.)

My task is,

  1. To save this CSS in a file in the upload folder dynamically
  2. Render the custom CSS from the file. (that was just generated dynamically in 1st step above.)
  3. Remove it from the HTML head section. Otherwise, the custom CSS will be rendered twice.

But actually it saves whole CSS in database, please can anyone suggest some code to perform this? Thanks

Here's a screenshot

enter image description here

Upvotes: 0

Views: 1041

Answers (2)

Abdul Ameer
Abdul Ameer

Reputation: 41

The perfect solution for this problem is very simple. I have done this for twenty seventeen themes functions.php file. Remove the starting and ending backticks...

       add_action('customize_register','mytheme_customizer_options');

       function mytheme_customizer_options($wp_customize){

     // Get upload directory
     $upload_dir = wp_get_upload_dir();

     // Create style file path
     $style_file_path = sprintf( '%1$s/css', untrailingslashit( 
     $upload_dir['basedir'] ) );

     // Create directories if they dot exist
     if( ! file_exists( $style_file_path ) ) {
     wp_mkdir_p( $style_file_path );
      }

     // Sanitize contents ( probably needs to be sanitized better, maybe with a CSS 
      specific library )
     $contents = wp_filter_nohtml_kses( wp_strip_all_tags( wp_get_custom_css() ) );

     // Replace the contents of the file with the new saved contents.
     $style_file = $style_file_path . '/my.css';
     file_put_contents( $style_file, $contents );

      }
     remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
      // /* How to Enqueues the external CSS file */
       add_action( 'wp_enqueue_scripts', 'my_external_styles' );
       function my_external_styles() {
      $upload_dir = wp_get_upload_dir();
      wp_register_style( 'my-css', sprintf( '%1$s/css', untrailingslashit( 
      $upload_dir['baseurl'] ) )  .'/my.css' );
      wp_enqueue_style( 'my-css' );
  }

Upvotes: 2

muzaffar younus
muzaffar younus

Reputation: 1

function my_custom_css() {
$upload_dir = wp_upload_dir(); 
$base_dir = wp_get_upload_dir(); 
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) :
$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';

$file = file_put_contents($upload_dir['basedir']."/new-style-function.css", strip_tags( $styles ) );
move_uploaded_file($file, $upload_dir['baseurl']);

endif;
}

add_action( 'save_post', 'my_custom_css' );

$upload_path = wp_upload_dir(); 
wp_enqueue_style ('custom-style',$upload_path['baseurl'] .'/new-style-function.css');



remove_action('wp_head', 'wp_custom_css_cb', 101);

Upvotes: 0

Related Questions