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?
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 );
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.
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' );
}
Im using a WordPress plugin called WP-PostRatings. It autocratically include their script.js and style.css in Wp_head() and wp_footer(). It is fine but i only want to load these files on custom post type "tools", not on other post type.
Can i deregister these files on other post types and pages.
for style this link is may be helpful https://codex.wordpress.org/Function_Reference/wp_deregister_style
and for script you will find from wordpress reference
Maybe something like this (in your Theme functions.php):
if ( 'tools' != get_post_type() ) {
remove_action('wp_enqueue_scripts', 'ratings_scripts');
}
Explanition:
In the Plugin-File wp-postratings.php at line 140 you can see the CSS/JS injection. You can prevent this, if the posttype not match.
You can add in your theme function.php
function some_func( $query ){
if ( is_post_type_archive('my_custom_post_type') ) {
wp_dequeue_script( 'jquery' );//your script name
}
}
add_action('pre_get_posts','some_func');
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.