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 );
Related
I am using WordPress and I installed the Woocommerce plugin.
I added the template folder in my theme and started to customize my theme.
Now, I have to remove the Woocommerce.css from my theme and I found code on the official website here
I added the same code in the function.php
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
or
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
but both answers are not working. I have installed the 5.7.1 Woocommerce.
How can I solve this issue?
function.php
function customtheme_scripts() {
wp_enqueue_style( 'customtheme-style', get_stylesheet_uri(), array(), time() );
wp_style_add_data( 'customtheme-style', 'rtl', 'replace' );
wp_enqueue_script( 'customtheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_dequeue_style( 'customtheme-woocommerce-style' );
}
add_action( 'wp_enqueue_scripts', 'customtheme_scripts' );
view source
The domain name is just an example.
This answer has been fully tested on woocommerce 5.x+ and works fine on the default woo style sheets! If you're using a custom theme and/or custom style sheet then you may encounter some discrepancies.
What you see on the documentation page, no longer works on woo 4+, according to their github page.
So you need to dequeue its styles!
wp_dequeue_styleDocs
So if you only want to remove woocommerce.css file, then you could do this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('woocommerce-general'); // This is "woocommerce.css" file
}
However, if you want to remove all of the style sheets loaded by woo, then you could use this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('wc-block-vendors-style');
wp_dequeue_style('wc-block-style');
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
If you still can see the styles, then try to clean your cache.
UPDATE related to the question "custom style sheet"
At the time that I was writing the answer you had not provided any screenshot of your style sheet, nor did you say anything about using a custom style sheet. That's why you were not able to get it to work.
Please do NOT copy/paste if you're using a custom style sheet, like the custom css file used in the question. wp_dequeue_style function takes your style sheet handle as the argument. So please read the documentation first. You're using a custom handle name (i.e "customtheme-woocommerce-style"), therefore, you need to use that handle name.
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('customtheme-woocommerce-style'); // This is your "custom style sheet" file.
}
Also note that commenting out the enqueue section in the main file (i.e inc/woocommerce.php) may work temporarily but on the next woo update, it'll come back again. So, it's recommended to avoid updating your template files as much as possible unless you really have to which is not the case here!
I am looking to find a solution for the following problem:
Via a plugin i would like to add a black bar to the very top of every page (similar to the wordpress admin bar you can see when you are logged in at wp-admin).
A solution I was looking into was to just add the code via a javascript file and append the html to the header. However this does not sound like the right way to do it. Unfortunately I haven't found any references on google on how to effictively do this the right way.
I was looking into register_my_menus() function but the function description did not promise the desired efforts.
Can anyone point me into the right direction please?
Thanks!
I think javascript would be better to append the html for a admin bar. If these users aren't affiliated with a wp backend you don't need any wp functions to display the desired links.
Another option ( I would say better then appending with JS ) would be to hook into the wp_footer hook and just create the HTML you need and use a CSS position:fixed; or position:absolute; with top: 0;
Example:
// Enqueue styles for top-bar
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( 'style1', plugin_dir_url( __FILE__ ) . 'css/top-bar.css' );
});
// Add HTML for top-bar
add_action( 'wp_footer', function(){
echo '<div class="top-bar">Some content</div>';
});
Best way is to add a function to your theme's functions.php file
function header_notification()
{
echo '<div><strong>Any html goes here</strong></div>';
}
add_action('wp_head', 'header_notification');
Ok, so im working on a theme that I want to have different styles and php files depending on which design the user has chosen. How would I do this? The best example I can give is having a get_template_part function that changes directory based on the users selection of design. Heres my idea of how the code would kinda look.
<?php /*custom_function*/(/*Global Path variable which changes*/, '/filename') ?>
The x theme has like stacks I think which might be a similar idea. Thanks.
Maybe something like this in the function.php: (just an example)
<?php
define("DESIGN", "flat");
if(DESIGN == "flat"){
add_action( 'wp_enqueue_scripts', 'asd_scripts' );
}elseif(DESIGN == "notflat"){
// other add_action( 'wp_enqueue_scripts', '...' );
}
function asd_scripts() {
// load bootstrap js
wp_enqueue_script('asd-bootstrapjs', get_template_directory_uri().'/includes/resources/bootstrap/js/bootstrap.js', array('jquery') );
}
?>
You need to use the theme customization api to achieve this. For example you would use the customize_register hook:
function mytheme_customize_register( $wp_customize )
{
//All your sections, settings, and controls will be added here
}
add_action( 'customize_register', 'mytheme_customize_register' );
This hook allows you access to the $wp_customize object.
There are existing examples in the WordPress docs, this should get you started with what you would like to do.
Hi
i need some help with the creation of a custom css file for my page template.
There are many topics out there regarding this issue but with each thread i read i get more information and more confused.
I created a child theme for the twentyfourteen theme and added a page template. How can i add custom css to this template. I discovered that
this code added to the child-theme's functions.php selects the appropriate class with my css. But how and where do i put this class? I read that i have to add the class to the body tag in the header.php but i am not sure. Is this the correct way?
if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}
Use the is_page_template() conditional to selectively load CSS.
In the function below we're hooking into wp_enqueue_scripts and checking if we're on the custom page template to determine whether to load additional CSS.
If the result is true we'll load a CSS file titled page-template.css from a css/ folder inside your theme. Update the path to load the correct file.
function wpse_enqueue_page_template_styles() {
if ( is_page_template( 'mytemplate.php' ) ) {
wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-template.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );
How about this solution ?
<?php
function mypage_head() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n";
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>
You can use wp_head hook to add you custom stuff (Javascript, CSS..) into your custom template. I think this way is better because all changes will contain in your template file, so you don't have to check in another place.
I get this solution from : http://scratch99.com/wordpress/development/custom-page-template-external-css-file/.
How about this one?
function my_custom_styles() {
wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
if ( is_home ) {
wp_enqueue_style( 'custom-styles' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
I have tested all three answers from here; and all of them works great. Does anybody know which one is faster & better?
I currently have been customising the standard 2013 theme included with Wordpress, making the standard child theme and adding to the bottom of the style.css stylesheet.
This works fine for all of my pages, however there is a case where I need a custom stylesheet 'news.css' for the News page.
I've tried adding the following code into the header.php file, just before the closing tag, to ensure that it's not overruled by other css files.
<?php
if ( is_page( 'news' ) ) { ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/news.css">
<?php } else {
}
?>
The news.css file is in the child theme's root directory, and the url is www.__.com/news/ however I still can't get Wordpress to load this file when on the News page.
What would I need to do to get this stylesheet to load, only for this page?
Thanks in advance.
EDIT: SOLUTION FOUND - The news page (being my posts page) had the .blog class applied to the body tag. Using .blog in the master css file, I can now specifically adjust this page's CSS! Thank goodness!
I see you've already fixed the issue by using a selector in the CSS that make the rules only apply to the page you want them to (in your case the .blog class worked good.
This is pretty much the standard way of doing things these days.
However I just wanted to put this here for reference in case anyone needs it in the future. The function below 'enqueues' the stylesheet and is the correct way of adding additional stylesheets. This function registers and enqueues 2 new stylesheets.
function load_additional_styles() {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
It's also possible to use conditionals within these functions so (using the question above as the example) you could do something like this
function load_additional_styles() {
if ( is_page( 'news' ) ) {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
In the above code the stylesheets will only be added when is_page('news') returns true.