Im trying to create my own WP-theme from my html/css-site.
I managed to migrate the html/css but the images won´t show up.
I realise that i have to change the img src-path but do i also have to add som php?
What does the path look like?
Thanks!
Are the images intended to be part of the theme? If so, then I'd recommend making a directory called images or something similar (I've seen some people use assets) in the theme's root directory (ie, wp-content/themes/[theme]/images).
Then you should be able to access them using get_template_directory_uri(), like so:
<img src='<?php get_template_directory_uri(); ?>/images/your-image.ext'>
If you're creating a Child Theme, and want to allow overrides of the parent themes images, replace get_template_directory_uri() with get_stylesheet_directory_uri().
References
get_template_directory_uri()
get_stylesheet_directory_uri()
Child Themes
Related
I know wordpress quite well, but this is the first time that I am creating a child theme. I realized that I need to link everything differently in a child theme.
I got it to work for images by using "stylesheet_directly", like so:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon.png" />
However, I am now trying to enqueue a javascript file in the child theme's functions.php I tried using "stylesheet_directory" again, but it returned a path of the parent's theme, and not the child theme.
Why does "stylesheet_directory" work for the image files in my child theme, but not for enqueing javascript files in my functins file?
Here is what I have in my functions. What else can I use to return the correct path?
wp_enqueue_script( 'ga-slider', bloginfo('stylesheet_directory') . '/js/ga-slider.js');
I have used get_stylesheet_directory_uri() instead of yours bloginfo('stylesheet_directory') . Ex.
wp_enqueue_script('script-name', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'),2, true );
you can use get_stylesheet_directory_uri() for relative path to the child theme directory.
get_stylesheet_directory() will return absolute path of the child theme directory.
Docs: https://codex.wordpress.org/Function_Reference/get_template_directory
I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.
Called the images in my theme as shown below
<img src="<?php bloginfo ('stylesheet_directory');?>/images/blogo.png" />
It worked perfectly until I installed a Child Theme. I had to change
<?php bloginfo ('stylesheet_directory');?>
to
<?php bloginfo ('template_directory');?>
Before it started working again. Just need help understanding why that happened. Thanks
stylesheet_directory is the directory that contains the main stylesheet in use (so if you have a child template then it would be the child directory. If not, it will be the template directory.
template_directory is the directory of your parent theme.
Look at the codex for more details
Stylsheet directory links to the main stylesheet, and not the child theme( since the child theme may not contain the style.css by default, it inherits the style.css of parent theme. So the parent path is called if you are using this).
So always use get_stylesheet_uri() or get_template_directory_uri() for these purpose.
Hope this clarifies you.
I'm new to WordPress and this is my first attempt to migrate a static website to WordPress. The websites layout must remain unchanged so I intend to develop a theme for it.
I'm used to having css files in the css directory, but the WordPress Theme Development page states that there has to be a style.css in the theme root.
Can I setup WP to get css/style.css instead? What is the recommended way to organise css files in WP?
You can use Wordpress' wp_enqueue_style.
function addMyScript() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' );
}
add_action('wp_head', 'addMyScript');
Just remember that you still need to have a style.css inside your theme root, even if it only has the details about the Theme in the form of comments.
Please refer to: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
I've semi-successfully created a wordpress child-theme. By successfully I mean:
I managed to create a child-theme directory in my themes folder, next
to my main theme
I created a style.css file in the child-theme dir
I saw the style show up on my Wordpress back-end and managed to activate it
I added templates (header.php, sidebar.php,...) to the directory
I made changes to the above templates and saw the changes on my site
However, there is one huge problem:
Whatever CSS I try to add to the style.css file, it's not affecting the site
I know the "information header" must be ok since I was able to see/activate the child-theme. But I really can't figure out what is wrong. I tried removing the #import rule, which according to the Wordpress codex should remove all styles from my site - nothing happened.
I'm using the Panorama theme and created "panorama-technology" as a child. Below you can see the code I have in the style.css file inside the child-theme: "panorama-technology":
/*
Theme Name: panorama-technology
Template: panorama
*/
#import url("../panorama/style.css");
#search{
margin: 15px 15px 0 0;
}
WouterB, I had the same problem with my child theme loading in the backend, and child php pages overriding the parent theme php pages, but NO child CSS changes loading to override the parent styles.
So,although with different coding, it turns out my parent theme was written in such a way that the header was also looking for the stylesheet in the template directory, so your solution was spot on in concept.
Thus, by changing the call in the header from :
<link rel="stylesheet" type="text/css"
href="<?php echo get_template_directory_uri();?>/style.css" />
to:
<link rel="stylesheet" type="text/css"
href="<?php echo get_stylesheet_directory_uri();?>/style.css" />
--did the trick like magic. At least as far as I can tell so far.
You get major credit in my book!
First I'd try an absolute path to be sure that the path isn't the problem. If that does not solve the issue. Place the #import at the very top of the css file or directly after thelast "*/". I think white space is probably the culprit here.
Do not use import.
Add time after css uri for refreshing everytime.
In your function.php
function child_style() {
wp_enqueue_style( 'parent-child', get_stylesheet_uri().'?'.time());
}
add_action( 'wp_enqueue_scripts', 'child_style', 20 );
Watch out from caching :
wp cache plug-ins
server side cache (APC etc.)
local browser cache