I wrote a small plugin and i want to add some css design my plugin meta boxes in the WordPress system.
All the scripts of adding a css file to WordPress plugin that I found are referring to including a css file in the plugin output page on the website itself. - wp_enqueue_scripts
the solution i created is to use this piece of code in my plugin page:
echo '<style type="text/css">';
include( '/css/style.css' );
echo '</style>';
But if feels to me like an unprofessional solution so I wanted to ask if anyone knows a better solution
You can use wp_enqueue_style() yourself, with plugins_url():
function my_styles(){
$css_path = plugins_url('/css/style.css', __FILE__);
wp_enqueue_style('my_stylesheet', $css_path);
}
add_action( 'admin_init', 'my_styles' );
Related
I'm using the add-menu-page function to add some kind of welcome page for my WordPress theme. Is there any way that I can style what is inside the page not using inline styling, or am I using add-menu-page for the wrong purpose?
Yeah, it's pretty straightforward. Here's what I'd do:
Create the CSS file
Enqueue the CSS file using admin_enqueue_scripts using code like this answer from the WP Stack Exchange.
Repeating that code here just in case the other answer is removed:
function my_admin_enqueue( $hook_suffix ) {
if( 'appearance_page_theme-options' === $hook_suffix ) {
wp_enqueue_style('my-theme-settings', get_template_directory_uri() . '/styles/theme-settings.css');
}
}
add_action( 'admin_enqueue_scripts', 'my_admin_enqueue', 10 );
ho to all the free folks!
Since the google speed insights report suggests adding a
<link rel="preload" href="/file-name.css" as="style"/>
to speed up the loading of the following resources
https://www.myoutlet.lt/wp-content/plugins/gdpr-cookie-compliance/dist/styles/lity.css
on the website https://www.myoutlet.lt
I am wondering how could I possibly achieve that!
There should be for sure some way to inject an HTML-tag into the header by means of recurring to some PHP-function in the functions.php or header.php file. As a junior SEO, I have some technical understanding, but I'm quite far from being a developer.
The one who will show me the way will earn my eternal gratitude! Thank you very much in advance for any valuable hint.
P.S.: I have to achieve this manually, without any plugins (the website is already quite slow!); the WP-website is based on the Avada Theme
On another tech forum, I was suggested to add the following snippet to the functions.php file
add_action( 'wp_head', 'se343581_add_preload_tag', 5);
function se343581_add_preload_tag()
{
echo '<link rel="preload" href="'.
plugins_url('/gdpr-cookie-compliance/dist/styles/lity.css') .
'" as="style">';
//
// -- if added in plugin file --
// echo '<link rel="preload" href="' . plugin_dir_url( __FILE__ ) .
//'some_subdir/file_name.css" as="style">';
}
That user asserted that this snippet was good to go as it is. I´ve tried it out in both the main theme and the child-theme function.php file, without success.
Is there anyone out there able to help me a little bit out?
May the force be with you, Roman
Check on what theme your site is using and inside that theme look for template file header.php. Most likely that's the place where you have to insert your code (again depending on theme).
For more details check on this: https://developer.wordpress.org/themes/basics/template-files/
Some browsers flagged that some http:// links in my page were being blocked as insecure. I looked at my page source and discovered in the header that a WordPress plugin sets up a <link rel='stylesheet' id='... to link in its own stylesheet but it is using the wrong protocol for the URL.
<link rel='stylesheet' id='fbw-css' href='http://wdcb.stcwdc.org/wp-content/plugins/.....
I have looked in the plugin and I can't find where that is being set up.
Is there a way in my theme child's stylesheet or in the functions.php file to override this so it uses https?
I was wondering if something like this might work in my CSS?
link#fbw-css href { url:https://wdcb.stcwdc.org/wp-content/plugins/.....;
}
Or is there a way to do this in a function?
There's a few methods of doing this (as is the WordPress way), but this should get you going for what you need.
Find the stylesheet id, in this case it looks like fbw. Ignore the css suffix here as that's added to stylesheets by WordPress by default.
Add this somewhere in your themes functions.php file:
add_action( 'wp_enqueue_scripts', 'so_50112358_enqueue_css', 20, 0 );
function so_50112358_enqueue_css() {
// Remove the old stylesheet
wp_dequeue_style( 'fbw' );
wp_deregister_style( 'fbw' );
// The new URL to the stylesheet with HTTPS
$css_link = 'https://...';
// Add it in again
wp_register_style( 'fbw', $css_link, array(), '50112358', 'screen' );
wp_enqueue_style( 'fbw' );
}
More information on wp_register_style can be found in the Developer docs. Handy if you want to customise things. Oh and so can wp_deregister_style.
Good morning. I've two document CCS, one contain Material Design Lite CSS and other is been created by me for customize WP-login.
I'd ask if it's possible write some classes written in Material Design Lite CSS in one class created in my customize WP-login CSS?
Cause for customize WP-login I can't modify his HTML, so I can modify this file by creating another CSS and overwriting class of original WP-login CSS.
Add the following code to functions.php to have WordPress load your new stylesheet.
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
Now any CSS you add to this stylesheet will be loaded for the login page. This enables you to change any part of the design to your liking.
You can refer this alos: https://torquemag.io/2016/08/customize-wordpress-login-page/
Hope this works for you.
I'm just getting started on Wordpress and although I was making decent progress tweaking my html5blank theme. Everyone kept telling me I should be using a child theme instead - so I decided to do so!
I still want to keep my css/font/js/img folders as close as I can to the structure in original HTML templates. Before using a child theme, I used to load in my /css/main.css file in .header.php like this:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/main.css">
Now I understand I should load it in the html5blank-child folder in .functions.php like this:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/main.css' );
}
?>
This seemed to work but obviously the styles from html5blank/style.css are inherited. I’m guessing it’s not a good idea to remove the file? What would be the best way to handle this?
One other issue with this is I can access the admin via the /wp-admin URL but if I go to a post and 'update' it it goes to a blank post.php page
Any ideas? Thanks in advance!
Instead of using
get_template_directory_uri()
use
get_stylesheet_directory_uri()
and you will always get files from your child theme, if file is not found in child theme it will fallback to your parent theme.