This is my code to load a CSS file in the wordpress backend:
function customAdminStyles() {
$url = get_bloginfo('template_url') . '/wp-admin.css';
echo '<!-- custom admin css -->
<link rel="stylesheet" type="text/css" href="' . $url . '" />
<!-- /end custom adming css -->';
}
add_action('admin_head', 'customAdminStyles');
The problem is that the styles are overwritten by original wordpress CSS declarations, so i have to put a "!important" behind every declaration - i don't like that. Any idea how to load it at last? I don't want to use a plugin.
Try this code . This will load admin-style.css in the backend
add_action( 'admin_enqueue_scripts','admin_styles',10 );
function admin_styles() {
wp_register_style( 'custom_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_admin_css' );
}
Related
I need to connect a css file so that all css files of the site could be edited from it
including files like botton.min.css
through the functions.php file it is not displayed further
static2.keep4u.ru/2018/11/10/nnnnnd8073f6a38d659d0.jpg
for output I used
function spon_style() {
wp_enqueue_style( 'Me_css_code', get_template_directory_uri() . '/spon.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'spon_style' );
Just access your header.php file and add style before tag:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/spon.css" />
I have a custom template that includes a specific folder where the CSS files are located:
WP\wp-content\themes\tema\css
It does not find the file when I add it to my HTML file like this:
<link rel="stylesheet" type="text/css" href="/wp-content/themes/tema/css/style.css">
I came across get_template_directory() but I don't know how to implement this so that I can access to my template folders?
The first thing to point out here is that get_template_directory() returns an absolute path instead of a URL.
Instead you will need to make use of either get_template_directory_uri() or get_stylesheet_directory_uri().
Your example would then look like this:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
The second thing to address is how you are adding your stylesheet. Wordpress has a very useful function that is optimised for adding stylesheets called: wp_enqueue_style().
Instead of manually adding your stylesheet to the header.php inside your theme directory, you can instead add it inside your functions.php file, like this:
add_action( 'wp_enqueue_scripts', 'so_my_custom_scripts' );
function so_my_custom_scripts() {
wp_enqueue_style( 'my-custom-stylesheet', get_template_directory_uri() . '/css/style.css', array(), '20180618' );
}
Add this inside your functions.php
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_style( 'st', get_stylesheet_directory_uri() . '/css/style.css', '', '0.0.1', 'all' );
}
Try tilde ~ to come to main root of website like this
<link rel="stylesheet" type="text/css" href="~/wp-content/themes/tema/css/style.css">
I am trying to develop a Wordpress theme and I am trying to add Options in my Theme to customize the default style. For this I have added a function that get user defined values and insert defined styles in head section using wp_enqueue_scripts()
function woo_wonder_custom_style(){
$custom_background_color = get_option('ww_background_color');
?>
<style type="text/css">
body{
background-color: <?php echo $custom_background_color; ?>;
}
</style>
<?php
}
add_action( 'wp_enqueue_scripts', 'woo_wonder_custom_style', 9999 );
I have other default stylesheets as well and they are also included in theme using wp_enqueue_scripts() only.
function woo_wonder_stylesheets()
{
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
wp_enqueue_style( 'ww_custom', get_template_directory_uri() . '/assets/css/woo-wonder.css' );
}
add_action( 'wp_enqueue_scripts', 'woo_wonder_stylesheets', 11 );
I want to set priority of my custom style woo_wonder_custom_style() to come below default stylesheets woo_wonder_stylesheets()
Any help is much appreciated.
This is my first try with wordpress theme development so please excuse me if I am making any silly mistake.
Thanks
Try this one,
function woo_wonder_custom_style(){
$custom_background_color = get_option('ww_background_color');
?>
<style type="text/css">
body{
background-color: <?php echo $custom_background_color; ?>;
}
<?php
}
add_action( 'wp_head', 'woo_wonder_custom_style', 9999 );
?>
hope this will helps you.
I'm a beginer on wordpress, and my job will be to integrate templates and themes.
But a have a question with the wp_head and wp_footerfunctions.
Both of them generate stylesheet and scripts, but on my theme and my template page and would like only one stylesheet and one script (ex : css/style.css and js/app.js) .
I mean, style.css will have template rules but already styles from plugin etc .
And app.js will have jQuery minified, severals plugins (like lightbox etc) and my own script .
How can i do that ? I normally use grunt or gulp . But can i say ton wp functions "don't add scripts from plugins in the head, but add it in my main JS file " ?
Best regards
Scripts that are loaded through wp_head or wp_footer are enqueued in Wordpress.
If you want to remove those and instead load only your one single stylesheet and one single JS file, then you will need to dequeue all of those other scripts.
First, however, you need to identify which scripts are enqueued, which you can do by loading the global $wp_styles and $wp_scripts variables and iterating through them like so:
function se_inspect_styles() {
global $wp_styles;
echo "<h2>Enqueued CSS Stylesheets</h2><ul>";
foreach( $wp_styles->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_styles', 'se_inspect_styles' );
function se_inspect_scripts() {
global $wp_scripts;
echo "<h2>Enqueued JS Scripts</h2><ul>";
foreach( $wp_scripts->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_scripts', 'se_inspect_scripts' );
Then you can manually dequeue and deregister all those scripts by hooking into the wp_print_styles action (for CSS files) and the wp_print_scripts action (for JS files) like below:
// Dequeue CSS
function se_dequeue_unnecessary_styles() {
wp_dequeue_style( 'bootstrap-map' );
wp_deregister_style( 'bootstrap-map' );
}
add_action( 'wp_print_styles', 'se_dequeue_unnecessary_styles' );
// Dequeue JS
function se_dequeue_unnecessary_scripts() {
wp_dequeue_script( 'modernizr-js' );
wp_deregister_script( 'modernizr-js' );
wp_dequeue_script( 'project-js' );
wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'se_dequeue_unnecessary_scripts' );
If you still need any of the dequeued scripts, then just be sure to add their source to your grunt / gulp file.
Lastly, you'll want to enqueue your one single CSS and JS scripts produced by grunt / gulp (although you can always just link to these manually from your templates if you feel like it).
Here is some example code for doing so:
function se_theme_js(){
// Theme JS
wp_register_script( 'my-scripts',
get_template_directory_uri() . '/js/main.min.js',
array('jquery'),
null,
true );
wp_enqueue_script('my-scripts');
}
add_action( 'wp_enqueue_scripts', 'se_theme_js' );
function se_theme_styles() {
// Theme CSS
wp_register_style( 'my-style',
get_stylesheet_directory_uri() . '/css/main.min.css',
array(),
null,
'all' );
wp_enqueue_style( 'my-style' );
}
add_action( 'wp_enqueue_scripts', 'se_theme_styles' );
I edit the file style.css in theme, but it just help to CSS the frontend, not work with the backend admin.
How can I CSS the backend admin?
Thanks
In your functions .php
Add the flowing:
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/style-admin.css">';
}