Generate dynamic css with option page (ACF) - css

I'm currently working on an option page (ACF Pro v5) for wordpress that dynamically generates a css file. When I'm testing this locally it works fine; only on a live server the dynamic css couldn't generate by wordpress.
Am I missing something? Is there something white the rights that wordpress can't write the file. I've a clean custom-style.css placed in the right folder with chmod 777.
This is the code I've written in my functions.php:
function generate_options_css() {
$ss_dir = get_stylesheet_directory();
ob_start(); // Capture all output into buffer
require($ss_dir . '/styles.php'); // Grab the custom-style.php file
$css = ob_get_clean(); // Store output in a variable, then flush the buffer
file_put_contents($ss_dir . '/Library/css/custom-styles.css', $css, LOCK_EX); // Save it as a css file
} add_action( 'acf/save_post', 'generate_options_css' ); //Parse the output and write the CSS file on post save
wp_enqueue_style( 'custom-styles', get_template_directory_uri() . '/Library/css/custom-styles.css' );

May be your live server is running with a child theme and your local setup has no child theme. This is why your local version is working and the live is not working. The most probable reason is that you are using both funtions get_template_directory_uri() and get_stylesheet_directory(); and both will point to the same '/Library/css/custom-styles.css' file only if your current active theme is not a child theme.
So, it is wiser to use any one based on your demand and not both together :)

Related

Custom Stylesheet/Scripts returns a 404 - Wordpress Theme

I'm bursting my brains out. I just can't figure out why my custom stylesheets/scripts won't load.
The stylesheet/scripts are properly enqueued (see below) but for some reason, if I load the stylesheet on my browser, or check in the browser console. it would return a 404
enqueued via
wp_enqueue_style('libraries', get_template_directory_uri() . '/assets/build/css/libraries.css');
wp_enqueue_style('site', get_template_directory_uri() . '/assets/build/css/site.css');
I have also checked file permissions, and theme and file folders are set to 770.
What do you think is the issue?
Try with get_theme_file_uri() like this:
wp_enqueue_style ( 'site', get_theme_file_uri('/assets/build/css/site.css'), ... );
Here the link to the documentation of this function:
https://developer.wordpress.org/reference/functions/get_theme_file_uri/

WP finally live: How to edit style.css on the fly and live (Theme Editor?) and immediately see changes + caching

I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?
Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.

How to update WordPress theme files with child theme

I'm trying to make changes to a WordPress theme via FTP, and it doesn't appear to update on the live website.
In this case I made changes to a JavaScript file:
../wp-content/themes/Divi/includes/builder/scripts/frontend-builder-global-functions.js
Currently a child version of the theme is active on the site. Is there a process I'm missing to have my live website reflect the changes? Also, in Chrome developer tools, the file I tried to update has ?ver=3.17.6 at the end of the filename.
The easiest way would be to copy the updated JavaScript file from the parent into the child theme's folder, next in your child theme functions.php file use the built in WordPress functions wp_deregister_script and wp_register_script. Your code should be like this:
function new_child_script() {
// De-register the Divi default theme script
wp_deregister_script('frontend-builder-global'); //check the name of the default script in page source
// Register the updated script from the child theme
wp_register_script('frontend-builder-global-custom-script', get_template_directory_uri() . '/js/frontend-builder-global-functions.js',
array('jquery'));
// Enqueue the script
wp_enqueue_script('frontend-builder-global-custom-script');
}
add_action('wp_enqueue_scripts', 'new_child_script');

Where shall I call wp_register_script() to load js in wordpress?

This article explains very clearly how to load javascript file in wordpress, expect for one thing. Where do I call wp_register_script()? So many php file, where should I put it?
Where should I put my js file?
Can I just use script tag in text file?
I am assuming you are trying to add your javascript files on your theme and lets also assume that you want to add a javascript file called custom-script.js. In that case you can create a folder called js in your theme folder and add your js file on that folder. Then you add the following code in your functions.php file of the theme.
function wptuts_scripts_basic()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' );

Wordpress: how to create a template that is still available when you switch theme?

I have a custom template for my portfolio page. However, after switching theme, it's gone because it is in my previous theme's folder.
Technically, I can copy that file into my new theme folder. However, I plan to change theme every two weeks and this becomes non-trivial. Is there a way to always have a bunch of common template files available to me no matter when and how often I switch theme? (In other words, I want to create template files that are not dependent on themes.)
Thanks!
There is, using template_redirect, which you would put in the functions.php file.
function uniquename_default_template() {
global $wpdb;
if(get_post_type() == 'posttype') : /* You could use is_single() instead of get_post_type() == '' or any type of conditional tag) */
include(TEMPLATEDIR . 'path/to/theme/file.php'); /* You could use TEMPLATEDIR to get a file from a template folder, or PLUGINDIR to get a file from the plugins directory - doesn't support HTTP requests */
exit; endif;
}
add_action('template_redirect', 'uniquename_default_template');
Hope it helps.

Resources