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.
Related
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');
I'm making a Wordpress template and I want to have options in the built in Wordpress Customizer for things like accent color, custom font, etc. that will then be used throughout the template. However, this means that I can't just code static CSS and would have to pass a variable in somehow. How would I go about doing this?
Found an answer at https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/.
Here's the most relevant code:
function theme_enqueue_styles() {
wp_enqueue_style( 'theme-styles', get_stylesheet_uri() ); // This is where you enqueue your theme's main stylesheet
$custom_css = theme_get_customizer_css();
wp_add_inline_style( 'theme-styles', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
theme_get_customizer_css() here is a custom function that returns a string of CSS that directly overwrites any code in the main stylesheet pertaining to colors, for example. Because it is generated in PHP, get_theme_mod() can be used to check for/insert any customizer settings. Once this CSS is generated, wp_add_inline_style() adds it to the main stylesheet; if everything is coded properly, CSS's cascading nature will have the newly added code override the earlier code without any need for !important or anything like that.
I'm left wondering if, instead of overriding, the inline inserts can (or should) be the only declaration of CSS that could be possibly changed by the customizer, i.e. in theme_get_customizer_css() if there are no customizer options set return the default code rather than the default code being in the spreadsheet to start with. This would prevent there being tons of duplicate CSS, relying on cascade hierarchies to work, but the stylesheet would also be incomplete on its own, so maybe there's reason not to do this? Would love input if anyone has thoughts.
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 am making changes to an existing website that is based on WordPress (some javascript add-ins and a few PHP scripts for Ajax purposes).
Is their any proper directory that I should place all these files? I started off putting them in a folder in the root directory called assets, but then decided maybe they should go with the rest of the Wordpress template and javascripts files? Or should I keep them out of the wp- directories, and simply keep them in the assets folder?
I know its a trivial question, but I like doing things right- having them in directories that make sense.
You can keep all your javascript in a folder in your theme's directory, that is wp-content/themename/.
Concerning Ajax, it's implementation is different in WordPress. You must add a data variable called action in your ajax request and then hook it to a function in your functions.php file. Your ajax url should be wp-admin/admin-ajax.php available through admin_url( 'admin-ajax.php' ) in PHP.
Read AJAX in Plugins for examples.
If it is presentation related I believe you should place it in the corresponding theme folder. If it is a functionality you might want consider wrapping it inside a plugin and placing it in a plugin folder.
If you dont care about abstracting this change and making available to other themes, then I would just simply add it inside the theme folder. You have WP helper functions to get the web path to the current theme folder, or to include js from that folder.
The proper place in WordPress ecosystem is the folder wp-content, as this is the one that you preserve while doing WP upgrades, restorations or migrations.
In that folder, it could be part of a theme (/themes), a plugin (/plugins), an uploaded file (/uploads) or, if the situation requires, a custom folder (/my-custom-content).
/wp-content/themes/your-theme
Here, all presentation related code. It's a common mistake to place general functionality code in the theme's functions.php. The first question to be asked before placing custom functions in this file is:
If I change my theme, will I need this function?
See: Where to put my code: plugin or functions.php?
/wp-content/plugins/your-plugin
Let's say you need to enqueue some CSS or Javascript files, and this should happen whatever theme is being used.
The following sample plugin will load SWFObject (bundled with WP) in the page Map and the front page, as both contain a SWF Flash embed. And, in the rest of the site, it will load the WebFont Loader from Google CDN and a CSS file from within the plugin folder.
<?php
/** Plugin Name: My Enqueue Plugin */
add_action( 'wp_enqueue_scripts', 'enqueue_so_16354990' );
function enqueue_so_16354990() {
global $post;
if( $post->post_name == 'map' || is_front_page() ) {
// Enqueue bundled script
wp_enqueue_script( 'swfobject' );
}
else {
// Enqueue from external location
wp_enqueue_script(
'my-web-font',
'//ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js',
array( 'jquery' ), // Dependencies
time(), // Version, use time to prevent caching
true // Enqueue on footer
);
// Enqueue from within plugin directory
wp_enqueue_style( 'my-css', plugins_url( 'css/my-plugin.css', __FILE__) );
}
}
/wp-content/uploads
Here, your theme or plugin should place all user uploaded content, so it can be managed through WP Media Library screen. And the content should survive any theme swap or plugin de-activation.
/wp-content/custom-folder
Many image gallery plugins use this approach to store their custom media library.
Another use is for Mobile themes, where custom user themes are placed in this folder, so not to lose it on plugin update (as everything in the plugin or theme folders is replaced on upgrades).
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..