There are any differant among Them
get_template_directory_uri(); and get_stylesheet_uri(); or, get_stylesheet_directory_uri();
get_template_directory_uri();
= Directory of your current (parent) theme without trailing slash at the end.
Example: xyz/wp-content/themes/yourthemename
get_stylesheet_uri()
= Returns your style.css path from your current active theme. It is the same than no1 but with /style.css at the end.
Example: xyz/wp-content/themes/yourthemename/style.css
get_stylesheet_directory_uri();
= Returns your style.css directory as URL. It MIGHT be the same than No1. But No3 referes to the style.css directory of your parent OR, if in use, CHILD Theme. While No1 always returns your parent theme´s style.css directory
Example: xyz/wp-content/themes/yourthemename/childtheme
Related
I am using notepad ++ for starters. I created a parent folder in my documents where I save my code, within that folder I created a subfolder to store images.
Below is the code I am using
<section>
<img src="img/vietnam.jpg"
</section>
Why won't it display? I have named the image vietnam.jpg in my subfolder :S
Here the issue it could be because your are not getting to the right path where your image lives.
If you have, for instance, your html file contained in a folder which is at the same level of your img folder then you should add ../ in order to get up one level and then specify which folder you would like to get into, in this case img folder.
Ex.:
<section>
<img src="../img/vietnam.jpg" alt="vietnam">
</section>
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
If your HTML source file (e.g. index.html) is in the folder c:\Users\Patricia\Documents\adv, then as your img folder is a subfolder of \adv, the following should work.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<img src="img/vietnam.jpg" alt="vietnam">
</section>
</body>
</html>
What is the path to your HTML source parent folder?
Well, first of all i would suggest you to switch your code editor (e.g. to VisualStudio code as it is one of the editors used/preferred widely in the industries. Of course there's other Editrs/IDE's like WebStorm and so on ). Basically with the right plugins/configurations you will fasty become a superhero. For example, look at the screen below. I used relative path in VisualStudio and it shows the current path you're currently in.enter image description here
you are missing the closing bracket of img-tag, which leads to invalid html that cant be displayed properly
look at the example https://www.w3schools.com/tags/tag_img.asp
<img src="/img/vietnam.jpg" >
i'm using get_template_directory but its not connecting me to the js
<script src="<?php get_template_directory(); ?>/js/bootstrap.js"></script>
May be i'm doing it with the wrong way any suggestions?
The get_template_directory() retrieves the absolute path to the directory of the current theme, without the trailing slash.
whereas you need get_template_directory_uri() , which retrieve template directory URI for the current theme.
Try
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>
Note: This is not the right way to include scripts in Wordpress, use wp_enqueue_script() check
directory structure:
htdocs
index.php
cms.php
images/
image.jpg
otherpic.png
content/
home.php
otherfile.php
/content/home.php contains LOADS of images. It will be included in index.php, so take note that the src only has one dot, because its read from inside index.php:
<img src="./images/image.jpg"></img>
Now cms.php holds an iframe. The iframe is supposed to be the rich text editor so that home.php can be editted.
Which brings me the following problem: When I want to load home.php inside the iframe the image sources needs to have two dots,
<img src="../images/image.jpg"></img>
because home.php is inside /content/ so the iframe will see /content/ as is its parent directory, Not /htdocs/.
How do I make the images show inside the iframe/text editor AND index.php?
Just change the path to reference the web root so you don't have to adjust the tag for different directories:
<img src="/images/image.jpg" /> (No dots at the start of path)
To elaborate on the dots, the single dot . represents the current directory and the .. represents one back from the current directory. The / at the very beginning goes back to the webroot.
And, by the way, the <img> tag doesn't have a closing </img> tag; you have to leave the tag without the closing tag or use the self closing / as I've done above.
For example utexas.edu prepend the path with a /
<link rel="shortcut icon" href="/sites/default/files/webcentral_favicon_0.ico" type="image/x-icon" />
columbia.edu does not, it just starts with the folder name or path
<link rel="shortcut icon" href="sites/all/themes/base/columbia2/images/favicon-crown.png" type="image/x-icon" />
Both of these are relative, but I need a way to differentiate from absolute pahts.
How can I progrmatically tell when I'm working with a relative path or an absolute path?
URLS can be formatted like the following
Absolute:
http://google.com, https://google.com
Scheme relative:
//google.com links use the same scheme that the page was loaded
//en.wikipedia.org/apple-touch-icon.png
Site absolute:
/index.html
Page relative:
index.html, ../index.html, ./index.html
I don't really understand the question, but you seem confused about what a relative/absolute URL is.
If you need to convert a relative URL into an absolute, you can use http://code.google.com/p/js-uri/
If the first character in the href value starts with / then it's relative to the root of the domain. If it starts with . then same directory.. .. is a directory above and these can stack. If it doesnt start with those and not // or a full URL, then it's relative. And actually, . and .. are relative too.
Be aware that it can also start with // or https? and in that case it would be absolute.
You can simply check for the leading slash:
var link = $('link[rel="shortcut icon"]').attr('href');
var start = link.charAt(0); // Returns the leading slash (or not...)
if(start=='/'){
return 'absolute';
}else{
return 'relative';
}
If your "sites" directory is in the root directory of your site then both are equivalent. By the way, are you using Drupal? Drupal allows you to upload the favicon and the path is taken care of by it.
Couldn't you just look for an 'http' at the beginning of the URL? Even if you're connecting securely, if it's a full URL it should start with http.
I have edited this question:
At root, I have a working folder F (root/F), under F there is a folder B (root/F/B).
I have a folder A contains a php file a.php (root/A/a.php), containing a link to folder B:
<div>link</div>
In F, there is an index.php (root/F/index.php) includes the a.php in it, so index.php has a link to folder B;
There is a folder C under folder F. In C, there is another index.php (root/F/C/index.php), which also includes the a.php in it. But now the href becomes root/F/C/B/ instead of root/F/B/.
If I update a.php to <div>link</div>, although href in root/F/C/index.php becomes root/F/B, which is what I want, href in root/F/index.php becomes root/B/.
So my question is how to get a universal href in a.php for all the pages in my working folder?
Thanks for helping!
If you use "/F/B" it will always go to "root/F/B".
Try:
<div>link</div>
Put a absolute path.