I am using the divi theme and had a simple line of javascript running in footer.php:
<script>
console.log("inside of footer.php");
</script>
Then, i used Divi Theme Builder to make a custom footer and found that footer.php was no longer running. I need to add javascript back into the footer but can't figure out what file to enter it in. How do I place javascript into the footer?
It is not recommended at all to edit the footer.php template in an external theme.
The way we use this is.
Go to your_page/wp-content/themes/active_theme_name
Create a custom.js
Then in the functions.php add this line:
wp_enqueue_script( 'customjs', get_template_directory_uri() . '/custom.js', array ( 'jquery' ), 1.1, true);
Read, now you can write your console.log("inside of footer.php"); in a custom.js file.
Here's a brief tutorial by the creators of Divi covering how to include javascript on your Divi website.
https://www.elegantthemes.com/blog/divi-resources/best-practices-for-using-external-javascript-snippets-with-divi
Assuming you want to include your code in the footer for UX/SEO reasons, then the best route is probably to go to Divi > Theme Options > Integration and paste your code in the Add code to the <body> section.
This will insert your code immediately before the closing </body> tag on all your pages.
Related
When I tried to add code on on Twenty Twenty-Two theme I could not find header.php as it not uses like this pattern. Please tell me where to find the file and if the file is absent where to find the tag to add something inside the tag.
Twenty_Twenty_Two Theme
In the WordPress documentation for block themes like Twenty Twenty-Two, <head> is added automatically. Adding code, for example, Google Analytics, is recommended through a plugin.
or wp_head hook, added to function.php preferably child theme:
function hook_javascript() {
?>
<script>
alert('Page is loading...');
</script>
<?php
}
add_action('wp_head', 'hook_javascript');
Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/
I want to disable the footer of every page in WordPress, how can I do that?
Rafael
It depends on the theme. Look in /wp-content/themes/[your activated theme] folder. What theme are you using? There you should find template files for pages, single posts, post archives, header, footer, and more. The easiest way would be to edit the footer.php so that it is empty. Ideally, you'd make a child theme of the active theme and only include the files needed to create the child theme and the ones you were changing.
https://developer.wordpress.org/themes/advanced-topics/child-themes/
The following may work:
add_action('get_footer', function(){
ob_start(function($buffer){
return preg_replace('#<footer.+</footer>#', '', $buffer);
});
});
The action 'get_footer' is called before the footer template file is loaded and causes PHP to buffer the output of the footer template. When the script ends the callback of ob_start() will be called and it will remove the footer from the output buffer. This of course assumes the footer is bracketed by <footer> and </footer> which is standard practice.
Under theme customisation, I'm unable to set a video as the Header Media. This theme is being created from scratch so I've currently only got the following files: header.php, footer.php, functions.php, sidebar.php, index.php
I've tried setting video to true in the theme support section for wordpress. I've tried copying the implementation in the twentyseventeen theme.
I've tried different combination of parameters in the custom-header theme support function.
functions.php:
add_theme_support( 'custom-header', array(
'video' => true,
) );
header.php:
<?php the_custom_header_markup(); ?>
Wordpress is currently giving me the following error:
"This theme doesn’t support video headers on this page. Navigate to
the front page or another page that supports video headers."
In my functions.php I was loading jQuery like the following:
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
This caused jQuery to load first. To solve this, I forced it to be loaded in the footer.
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array(), '', true);
This is also better practice to stop it blocking rendering.
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.