How to update WordPress theme files with child theme - wordpress

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');

Related

Apply CSS file from activated WordPress Plugin

I am new to wordpress and want to know best way to add css from installed and activated plugin.
I have one activated plugin called "social-media" and in that plugin i have created one css file called "social-login-style.css"
I want to include this css file and apply style to my content. How should I add css file in any page so that I can see the effects.
In Short, I want to add social-login-style.css on wp-login.php file.
Whether it is theme or plugin, css or js, any custom addition, wp_enqueue_scripts is the only acton you need for all.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
function additional_custom_styles() {
/* Enqueue The Styles */
wp_enqueue_style( 'custom-login-style', plugins_url( 'social-login-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
If you it to be added only on login screen then use the following condition,
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {
// We're on the login page!
}
Hope this one help :)
UPDATE
Please check login_enqueue_scripts. it is designed to add custom scripts into login page only. Works well without any login condition.
https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
Without saying what you want to achieve is impossible, it certainly is against how WordPress is designed to work. Plugins are supposed to be modules that add to or modify how WordPress works. The folder of a plugin should only hold files pertaining to what the plugin does and, if it's a public plugin, its contents are controlled by a versioning (SVN) system.
In short, adding a file to an existing plugin will not have any effect, regardless of whether the plugin is active or not. And you should not add files to plugins you haven't developed yourself.
To load a CSS file on the login page, one should add an action hook to login_enqueue_scripts, as instructed in Customizing Login Form page of the codex. The stylesheet itself should be placed in either a custom plugin (you could create for your use-case) or inside the current theme folder.

SASS Files in Wordpress

Is there a way to access SCSS files from the Wordpress Theme editor UI? I have tried moving it to the root, next to my style.css and also leaving it in the SASS folder.
I am building a custom theme and already had SASS running on it locally and am now going to continue development in Wordpress.
You have to add the file extension before it will show up in the editor. You can do this with the wp_theme_editor_filetypes filter.
For example:
add_filter('wp_theme_editor_filetypes', function ($types) {
$types[] = 'scss';
return $types;
});

Load custom css after plugin css in wordpress

I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.

style.css in css directory (i.e. not in theme root)

I'm new to WordPress and this is my first attempt to migrate a static website to WordPress. The websites layout must remain unchanged so I intend to develop a theme for it.
I'm used to having css files in the css directory, but the WordPress Theme Development page states that there has to be a style.css in the theme root.
Can I setup WP to get css/style.css instead? What is the recommended way to organise css files in WP?
You can use Wordpress' wp_enqueue_style.
function addMyScript() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' );
}
add_action('wp_head', 'addMyScript');
Just remember that you still need to have a style.css inside your theme root, even if it only has the details about the Theme in the form of comments.
Please refer to: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

wordpress jquery inclusion by default

I'm using wordpress 3.3.1 and it seems that jquery is there by default, all i need to do is to enqueue the file through wp_enqueue_script function. What if i want to put this function inside another plugin that is already installed. For example, i'm using jwplayer plugin for wordpress now if i want the jwplayer plugin to enqueue the jquery file for me where do i tell it to do this, the main plugin file for jwplayer is named as jwplayermodule.php and it's at the root of the jwplayer plugin directory.
Regards
You enqueue jquery like so:
// Function to perform any things that need to be done BEFORE the header is called
function my_wp_init() {
wp_enqueue_script('jquery');
}
// Enable the widgets, prepare the function for the head call, etc.
add_action('init', 'my_wp_init');
The best place to do this would be in your theme's functions.php file. This way, jQuery is always loaded in your theme.
ALTERNATIVELY, you can drop the same code into the plugin php file you mentioned - jwplayermodule.php

Resources