I'm just getting started on Wordpress and although I was making decent progress tweaking my html5blank theme. Everyone kept telling me I should be using a child theme instead - so I decided to do so!
I still want to keep my css/font/js/img folders as close as I can to the structure in original HTML templates. Before using a child theme, I used to load in my /css/main.css file in .header.php like this:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/main.css">
Now I understand I should load it in the html5blank-child folder in .functions.php like this:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/main.css' );
}
?>
This seemed to work but obviously the styles from html5blank/style.css are inherited. I’m guessing it’s not a good idea to remove the file? What would be the best way to handle this?
One other issue with this is I can access the admin via the /wp-admin URL but if I go to a post and 'update' it it goes to a blank post.php page
Any ideas? Thanks in advance!
Instead of using
get_template_directory_uri()
use
get_stylesheet_directory_uri()
and you will always get files from your child theme, if file is not found in child theme it will fallback to your parent theme.
Related
I'm building a wp child theme of ThemeGrill's ColorMag. When I load the page, my child theme css file is loaded, but there is also a file called style.css?ver=5.3.2 loaded after it. When I look at the code under elements in the dev tools, it appears to be a cached version of my style.css file.
I've deleted the child theme folder and reuploaded all of my files but I see the same result. I also have wp-cache level set to 0
Also I should note, I'm new to wp and couldn't figure out how to enqueue the child theme properly, so style.css is loaded via an href in my header.php. my functions.php looks like this:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Again, I'm new so any best practices you have would be much appreciated!
Site is here.
I am using the good old twenty eleven for a simple job and overwrite styles using a child.
The Problem is, that editor styles are not overwritten when i add an editor-child.css in the child theme folder.
Adding add_editor_style in the child themes functions.php (wrapped in after_setup_theme) doesn't seem to work. Can't I load multiple editor styles or what is the problem here? I can't figure out how I can overwrite this ugly twenty eleven editor css in gutenberg. It might even be better to disable it, but even that doesn't work using remove_editor_style. And I can't find anything on the subject using google or stackoverflow.
<?php
// In the child theme functions.php. I simply want to use the style.css by the child theme as an extra editor style
function wysiwyg_styles() {
add_editor_style( get_stylesheet_uri() );
}
add_action( 'after_setup_theme', 'wysiwyg_styles');
?>
No css is loaded in the admin (after deleting chache AND cookies)
What happen is that you're using the wrong action hook... you should be using the admin_enqueue_scripts hook.
Try doing it like this.. and check if it works for you:
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/pathToYour.css');
});
// If the above does not work change get_stylesheet_directory_uri() for get_template_directory_uri()
Hope this can help, good luck.
You can try instead:
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
in your functions.php. Haven’t checked if it works with a child theme though.
More information here:
https://developer.wordpress.org/block-editor/developers/themes/theme-support/
I made a child theme for 'Square Theme' in Wordpress and my 'functions.php' code in my child theme looks like this:
<?php
function square_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent_style' ));
}
add_action( 'wp_enqueue_scripts', 'square_child_enqueue_styles' );
?>
The thing is, I also want to edit another css file, that its path in the parent theme is "/css/owl.carousel.css".
So, should I create an "owl.carousel.css" file in my child theme too? And also, which code should I add to my child-theme's "functions.php"?
Depends whether that owl css is loaded in the child theme too and what you mean by 'edit'. Child theme normally inherits all the parent php template files, and the parent functions.php but not the base css. So normally one has to enqueue the parent css if one wants to use it. I imagine in this case if it's not the main css it might be being loaded anyway? (View source to check)
1) If you don't want it at all, you could use wp_dequeue_style to get rid of it.
or
2) if by 'edit' you mean you just want to make minor modifications, you could add those minor mods to override the owl css in your own stylesheet.
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' );
}
So I have xampp and currently trying to learn some Wordpress development. I've made a simple bootstrap page into Wordpress, but which ever page I put as my front page does not load any CSS, whilst the other pages work fine.
If I change the front page to a page that previously worked fine, it also loses the CSS.
https://i.gyazo.com/bcb75b7a7fa64cd99cb43bd1c3067324.png
https://i.gyazo.com/7184fec113c09755961088fa69191528.png
What am I doing wrong here? I am running everything locally on 127.0.0.1
Thanks in advance for helping me !
The proper way to add css in your files using WordPress to use the function wp_enqueue_style it will not override the css declaration but enqueue it
In your functions.php
function your_scripts() {
wp_enqueue_style( 'filjoseph-style', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );
and putting this <?php wp_head(); ?>in your header.php before </head> in your head section, wordpress will ensure the style.css loaded properly.