New to wordpress so struggling a little bit here.
Basically I've got 4 custom page templates that I need to create: Home, Portfolio, About, Contact.
For each of these new pages I need a new CSS file. I've enqueued my script portfolio.css as such:
function my_custom_styles() {
wp_register_style( 'portfolio',
get_template_directory_uri().'/portfolio.css' );
if ( is_portfolio ) {
wp_enqueue_style( 'portfolio' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
This works great - my only problem is that my main stylesheet style.css is clashing with this and overwriting a lot of the styles. Basically both style.css and portfolio.css are loading at the same time.
How do I get it so that only style.css loads on my Homepage, portfolio.css loads on my Portfolio page, about.css only loads on my about page etc.
I can't seem to find any help online for this!
Cheers guys!
Ideally, portfolio.css, about.css, etc. would extend style.css, where most of the core styles (font size, weight, padding, accent declarations, etc.) would be defined in style, but portfolio would add some additional styles not used elsewhere.
If you truly want them to be mutually exclusive, you'll have to dequeue the style.css file.
View your page source and search for /YOURACTIVETHEME/style.css. Note the id="some-style-id" in the <link> tag. That's the "handle" for the stylesheet, and you can use wp_deregister_style() or wp_dequeue_style() to remove it.
Also, clean up your code, it's going to get hard to maintain with those inconsistent indentations. Going through your code, are you sure your if statement is working? is_portfolio is being as a constant right now… You're probably intending it to be passed using something like the is_page() or is_page_template() functions.
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
function my_custom_styles() {
wp_register_style( 'portfolio', get_template_directory_uri().'/portfolio.css' );
if( is_page('portfolio') ){ // Use Page Title, Page Slug, or Page ID here
wp_enqueue_style( 'portfolio' );
wp_dequeue_style( 'YOUR-ID-FROM-EARLIER' );
}
}
All of this said, if you have custom page templates, you could just use put
wp_enqueue_style( 'portfolio', get_template_directory_uri().'/portfolio.css' );
wp_dequeue_style( 'YOUR-ID-FROM-EARLIER' );
in the page template files.
Another thing to consider is that you're using get_template_directory_uri() which will pull from the parent theme. If you want the active child theme that uses a template (ala Genesis) you'll need to use get_stylesheet_directory_uri() instead.
Related
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}
I have three parts to this question.
I am building a portfolio site in Wordpress and have some weird links going on. For example on my about page, here is what my link looks like : localhost/AFolder/anotherfolder/index.php/about-me. I went into Permalinks to try and change the link, but when I changed it to post name instead of custom structure, which it was before I was left with a broken link on my about page. My home page is index.php I have no idea why the link is referencing index.php How can I fix this?
My design calls for a grey background on the about page and it is not displaying. Everything else seems to be working except for the background. Is the link (refer to question above) interfering with the CSS because it is referencing the index.php file in the link? Most of the background on my homepage (index.php) is white and it looks the same on my about page. Maybe these two matters are related.
What is the best way to link custom CSS in Wordpress. I found a way to do it already but I'm not sure if this is best practice: see above snippet.
Is there a good plugin that's better suited to link the CSS or is there another good trick to do this?
<?php
function theme_styles() {
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'navbar_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'carousel_css', get_template_directory_uri() . '/css/carousel.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'add_custom_styles' );
function add_custom_styles() {
wp_enqueue_style( 'about_css', get_template_directory_uri() . '/about-page.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_page_css' );
function custom_page_css() {
if ( is_page( 'about-me' ) {
wp_enqueue_style( 'about_css', get_template_directory_uri() . '/about-page.css' );
}
}
Have you tried en-queuing the styles ??
Try these codes in your functions.php file within your theme folder.
The following method adds the two styles (style.css and another_style.css) to the part where wp_head(); action is called (usually the header part of the page).
add_action( 'wp_enqueue_scripts', 'add_custom_styles' );
function add_custom_styles() {
wp_enqueue_style('id_of_style', get_template_directory_uri().'/path/to/style.css' );
wp_enqueue_style('id_of_another_style', get_template_directory_uri().'/path/to/another_style.css' );
}
Here the styles are added in order. The order in which the styles are enqueued affects the styling of page as there may be chances of overriding styles. So you have to enqueue the styles in order.
add_action( 'wp_enqueue_scripts, 'custom_page_css' );
function custom_page_css() {
if ( is_page( 'Custom' ) {
wp_enqueue_style( 'custom-css', get_template_directory_uri().'/path-to/contact.css' );
}
}
Here the style is added to the header of Custom page only.
Try these once. Remember one thing, you have to know the order of css files. This might be some pain in ass. I also got that gray background but ordering the styles solved the problem for me.
The same goes for adding scripts.
I need to put a styled map on a contact page in WP.
I'd rather not use a plugin as it would be overkill, embedding on the other way won't allow me to customize layers, use placeholders, etc
I coded an example map on a static html page. https://dl.dropboxusercontent.com/u/13823768/map/test.html
How do I get from here to wordpress?
EDIT: I'm working with a child theme so I put this in functions.php (in my child-theme dir)
function enqueue_custom_scripts() {
wp_enqueue_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=it');
wp_enqueue_script('google-map-style', get_stylesheet_directory_uri() . '/js/map.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
?>
Looks ok so far but it needs <body onload="initialize()"> too.
Do you know how I can add the onload to the body tag?
You can accomplish this by creating a custom theme page template: http://codex.wordpress.org/Page_Templates or simply add the #map_canvas element in the "text" view of the WSYWYG content area of the page editor.
The next step is to add all of your map scripts, I would do this by enqueuing the scripts in your theme's functions.php by creating a callback function that is called on the wp_enqueue_scripts action: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.
the function you will add to functions.php would look something like this(replacing the filepaths with your scripts):
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I know you mentioned not wanting a plugin for overkill, but a plugin would allow portability of your code and would allow you to switch themes without losing your map code. Adding a plugin and shortcode to render the #map_canvas element would not be much more time than adding the code to functions.php. If your interested in writing a custom plugin, http://codex.wordpress.org/Writing_a_Plugin
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.