The question title is self explanatory but, here it goes something else:
I need to add a small amount of CSS rules to style a plugin but I need to do it in my Wordpress functions.php to avoid messing around with core files of that same plugin.
Is this possible, how?
You do not need to "add style to the plugin," as a correctly configured WordPress installation will allow you to override the plugin CSS easily without interfacing with the plugin at all.
You should be using a WordPress Child Theme. You can add your CSS to the end of the child them style.css file.
You can also include CSS through theme settings in some themes. Search for "Custom CSS [YourThemeName].
Or, you can choose one of many plugins that will permit you to configure custom CSS as well.
Finally, you could use one of many different approaches for including style with PHP.
I often use wp_add_inline_style for simple, brief CSS inclusions:
function add_some_custom_style(){
ob_start();
?>
.someclass {
somestyle: style;
}
<?php
$style = ob_get_clean();
if (! wp_style_is('some-custom-style-handle', 'enqueued')) {
wp_register_style('some-custom-style-handle', false );
wp_enqueue_style('some-custom-style-handle');
wp_add_inline_style('some-custom-style-handle', $style);
}
}
add_action('wp_head', 'add_some_custom_style');
Related
I'm following a Udemy WordPress Course to create a custom WordPress Block Theme. I successfully registered the block type within my functions.php and can select my Block in the Gutenberg Editor.
The tutorial suggested to use the following ways to load the styles for my gutenberg block element, so the the css will be loaded in the frontend as well.
function lr_theme_features() {
// Enqueue editor styles
// Borrowed from TwentyTwentyToTheme
add_editor_style( 'style.css' );
add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'lr_theme_features');
Anyway, no matter what I do, Gutenberg isn't loading the style.css file for my block.
Image from the Gutenberg Backend
Any Tips, what I might be missing or how I can debug the problem?
Thank you very much!
In a block based theme, wp-block-styles is used to load the stylesheet in the Editor and Frontend. The TwentyTwentyTwo Theme uses the same technique; it may be you've followed a (now) outdated theme tutorial given block based themes are relatively new.
function lr_theme_features() {
// Add support for block styles.
add_theme_support( 'wp-block-styles' );
// Enqueue editor styles.
add_editor_style( 'style.css' );
}
add_action('after_setup_theme', 'lr_theme_features');
If you still can't see your styles being loaded, check the class names of the blocks you're targeting matches the HTML markup.
PS. Always clear your browser cache/hard refresh to be sure you're not seeing a cached version of the Editor - its a very common but overlooked cause of many issues.
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 am new to Drupal.
I am in need to add an external stylesheet to an existing site. I see drupal_add_css() to be used to add stylesheet.
I tried to add this function my template.php, but it is not making any change.
Neither it is adding stylsheet nor throwing any error in console.
This is what I did
function drupal_add_css()
{
$path = '/css/new_style.css';
$type = 'module';
$media = 'all';
$preprocess = TRUE;
}
I have added the above snippet in my theme's template.php
How do I add the new_style.css to an existing array of stylesheet.- $Style
The existing theme name is 9ways
Plus this stylesheet should be the first css to be included.
The drupal version being used is v6.0
You don't want to override drupal_add_css() you want to use it.
In your template.php you need to define the hook you want to use to add your CSS file. If you want a page-specific CSS file you can define a hook_preprocess_page() and use drupal_add_css() in that hook:
function mytheme_preprocess_page(&$vars) {
...check for page you want to add css for...
drupal_add_css( drupal_get_path('theme', 'mytheme') . '/css/pagestyles.css', 'theme');
}
That said if you want a css file as part of your theme on all your pages you don't want to add it using drupal_add_css(), you should use the .info file and include the file there:
stylesheets[all][] = css/style.css
Take Note: Drupal 6 is no longer officially supported by the community. While there are some places that are offering long term support for Drupal 6, you should plan to move to Drupal 7 or 8 soon.
You can try module css injector
https://www.drupal.org/project/css_injector
With this module you can inject css style, you must reference the id or class
I'm at an early stage of learning Wordpress (and shortcode), so bear with me:
To me, shortcodes seem like a swiss army knife of not having to use page-specific templates for everything. I like to build as many pages in the wysiwyg as possible, but often I would need some (reusable) php stuff for displaying stuff in a certain way.
Having googled a lot, it seems to me the way to do shortcodes is like:
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
My question is, is it possible to put the html in a separate template-ish file? It seems wrong and verbose to put all this markup here, escape quotes, et.c. Like a template-file for a shortcode, to which the shortcode can pass some Data Transfer Object (or simply just some scoped variables). So: display in template-file, logic for finding data (to pass to said template-file) in shortcode-function (wherever it may be defined, functions.php, separate plugin, or something).
You can set-up views(php files) and then include partial views into those ones. Wordpress allows templates to be includes within other templates to ensure code reuse and its easily modifiable by child themes. You can use this function to include those
get_template_part( $slug );
However, in your case, the short code function needs to return the value to the caller function. So, this setup will not work.
For code that effects FUNCTIONALITY, put your code in a plugin.
For APPEARANCE, put your code in your theme's template files or funtions.php file.
Many beggining WP developers lump all their code into the theme's functions.php file, this is often the wrong place for it (if that code might ever get exported to another theme, for instance). Only put code specific to a specific theme in a theme's functions.php .
To get Wordpress to recognize your plugin, create a php file and start the file like this:
<?php
/*
Plugin Name: My Caption Shortcode Plugin
Description: A really cool plugin
*/
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
?>
Put this file in your plugins directory (usually, you should create a sub directory for each plugin). Plugins are usually held in /wp-content/plugins/ . Then you can activate or deactive the code as a plugin, when you go to the plugins tab in the admin menu.
Of course, this plugin won't do anything as is. Remember that plugin functionality should be hooked into Wordpress via action hooks, filters, and shortcodes. For a shortcode for instance, you'd use the function add_shortcode somewhere to let Wordpress know your function is a shortcode.
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..