Ok, I'm not really sure how to do this so maybe someone can help me out.
I am trying to create a function in my plugin that calls CSS to be used on the front-end of the site. Sounds simple... but there's a catch.
Rather than calling a CSS file, I want to be able to call a PHP file that outputs the CSS styles from the database (plugin saved variable)..
For example... the standard method:
<?php
function register_style(){
wp_register_style( 'front_stylesheet', plugins_url( '/css/custom.css', __FILE__ ) );
wp_enqueue_style( 'front_stylesheet' );
}
add_action( 'enqueue_scripts', 'register_style' );
?>
but I know I can't simply change "/css/rs.css" to the PHP file path. So how would I refer to that PHP file instead?
The PHP file is basically just a simple page that obtains the CSS styles from the database and outputs that content "without the STYLE tags because the tags are already echoed.
Any help would be appreciated.
You can add the file as normal using the register_style method as you said and have the path as "/css/custom.php", and in the top of your custom.php file that generates the css, add:
header("Content-type: text/css");
This has to be the first line of the file with no whitespace before it.
Related
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
I've created a child theme and am running my site on that so that I can customise a form that I'm including on certain pages using the plugin 'contact-form-7". In my child folder I've placed a style.css, functions.php and js/custom_script.js. the style sheet is being imported fine but I can't seem to get my validation jquery file working on that form. This is the code I've been using:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js' ,array( 'jquery'));
wp_enqueue_script( 'custom_script' );
}
console isn't logging any errors but I can't seem to find it in the web tools side bar UNLESS I remove "js/" when the custom_script is called, in which case a GET error pops up.
I'm guessing I'm incorrectly importing the file and honestly I can't quite get my head around these hooks and importing files just yet- only been using wordpress a short time.
Any help much appreciated.
I believe that you haven't included the JQuery file? You have to download it first https://jquery.com/download/, and then register it as you did with "custom_script", you just have to put it before the "custom_script" in functions.php, inside "custom_script.js" you could also do:
$(document).ready(function(){
});
Go to your console and if you see:
Uncaught ReferenceError: $ is not defined
It's because you haven't included the JQuery file as needed.
Hope this helps!
Leo.
This is probably a simple question to answer but my Jquery wont work on my theme at all no matter what tutorial ive followed.
my js file is located as /js/jquery.js and the code inside is just for testing purposes:
jQuery(document).ready(function($) {
$('#banner').hide();
});
my functions.php file is located in the same location as the index is and the code ive done for that is:
<?php
function add_my_script() {
wp_enqueue_script(
'jquery', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . 'js/jquery.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
?>
and nothing happens... can anyone correct me in what I am doing wrong? This is what puts me off using wordpress.
Chances are you need to have a slash before "js":
get_template_directory_uri() . '/js/jquery.js'
With that said, you could check your site using the network monitor in your browser's developer tools. It will show you what URLs are being fetched. Or maybe just check your developer tool's console. It could show you a 404 error if it is unable to fetch your jQuery file.
wp_enqueue_script(
'call this something else!', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/jquery.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
you had a couple of typos.....also check if jquery is available by using your dev.console in chrome or firefox(right click on page, click inspect element, and then console) you'll get a error jquery undefined or similiar.
Also on your page in frontend:
get_header();
get_footer();
you dont use the head tags as these functions pull in the header file & footer files. without get_header() & get_footer - you'll have issues :)
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..