How do you link to relative links in wordpress?
For example I'm building a site onthisdomain.co.uk but the site will actually be sent live tothisdifferentdomain.co.uk.
Using the a tag brings in the full URL which I don't want as it'll cause problems when I move the sites over. Is there a php snippet I can use? I've googled it and found an image one, <img src="<?php echo get_template_directory_uri(); ?>/... " alt="" />, but could do with an anchor one
Many thanks
I'm sorry for my bad English. I hope you will understand it.
I think you are a beginner in WordPress theme development. Best of luck to you. I think you know how to use CSS. What I mean, when we use background-image to our class. we have to think where is the image is and where is my css file is. That's how we link images to css class. If I am right. Just like that in WordPress PHP we can use.
So, we can use css files in any website or any domain name. if we use like see below.
FOLDER STRUCTURE
>css->style.css
>js
>img->hello.jpg
index.php
Just imagin. If we use css class to hello.jpg
.myimg {
background-image: url('css/hello.jpg');
height: 100px;
width: 200px;
}
So now we can use this class in any domain. But that folder structure need to be same. If I am right. Simply use, get_template_directory_uri(). To more info read reference.
CODEX
Theme Development
Contact me by searching yeshansachithak in any social network. Thanks
The relative links are returned from the get_template_directory_uri() function.
It probably returns a string that looks like this : "/path/to/file.jpg"
I have no experience in wordpress but making relative links isn't specifically a php thing.
I use:
"> to link directly to a page ID.
to link to your theme root
to link to the root
Related
With the GDPR hitting hard I have to remove google fonts that are loaded per Link from Google Servers.
I have a wordpress theme that has those links everwhere.
I am not very good at php, but in this theme I have this link:
$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
}
I puts the loaded font into a var. I need to change this so it will load the font from my local font folder.
The problem is, I don't know how to change the link in a way that it will load all the font and font weights/styles. Is it possible? And maybe it is easy but I can't change the whole php file - not enough knowledge from my side and I don't want to risk destroying the theme.
(I know about #font-face and css but not how to add as a link in a var)
I appreciate any help - thank you!
It's not possible to simply replace the variable since it links to a CSS file. There's two options on what you can do. Due to the lack of more code, I can only describe how to do this and not provide direct examples.
Method one: Using your existing CSS, remove the variable
You can add the OpenSans font to your own CSS with the mentioned #font-face, and then remove where the $open_sans_font_url variable is used.
It's likely that this variable is only used to create a <link rel="stylesheet" href="..."> tag to include the Google Font. If you remove this stylesheet inclusion and other possible usages of the variable, you're no longer using Google Fonts.
Method two: Use your own CSS file with the font-face
For this, you need to create your own CSS file, for example opensans.css, with the font-face loaded in. You can then use the Wordpress function get_template_directory_uri() to get the address of your new CSS file within the theme like this:
$open_sans_font_url = get_template_directory_uri() . '/opensans.css';
I hope this helps!
I had the same issue and I solved it by switching to BunnyCDN Fonts, a clone of Google Fonts that (unlike Google Fonts) process requests completely anonymously.
https://fonts.bunny.net
https://css-tricks.com/bunny-fonts/
So, I am working on a website with backend for two customers. Both will have different URLs. I had a problem with Javascript links (ajax calls using url:) but that was solved using a global :
var SiteURL='<?php echo base_url();?>';
and append it to calls as necessary. The problem is when my paths go deeper e.g. website.com/book/sheet/2
the relative links would continue from 2/
While I am done with the JS, I am really lost on the CSS. I don't want to give absolute path, e.g. for background-image:url() as it will change with new customers.
Any way I can make use of base_url() or any other function?
#DFriend: that somehow failed for mine as it looked for images folder in css...Firebug showed "http://localhost/samplestud/assets/css/images/listicons/arrow_double.png"
Simple "../images" seems to have fixed it pretty well. Thanks fellas.
I'm currently turning a HTML page into a WordPress theme. Throughout the site I have a series of divs that use CSS backgrounds. What is the best practice for linking those images, so the user can change them as they please?
For reference, in the HTML, I have: background-image:url(/site/sprite.png);
You can use custom fields. If you don't know how to make them or you want an easy and robust way to manage them you can find the "Advanced Custom Fields" plugin in the wordpress.org plugin repository. It's free and it's very nice.
The way you would use custom fields here is because you will set those backgrounds with inline style to your theme. Otherwise "the user" will have to know how to change a CSS line of code (not very practical).
If you set them inline they would look something like this:
<div id="divBackground01" style="background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);>
</div>
Another option that I've seen people do is make the CSS file in a PHP file... you would use something like:
<style>
#divBackground01 {
background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);
}
</style>
Note that it's using PHP because the file would actually be a PHP file... otherwise you can't use PHP in a CSS file. Not sure that it's a very good practice to do this, but it's something doable as another option if you want.
Best to stick with adding the background style inline with the custom field. You can use PHP to make it conditional if needed and you can probably setup 1 post (so you have single ID) with all the custom fields... or whatever way you would prefer to present it to the user is your choice.
I have a small problem. I'm not good in php, so this may be something really simple. Basically, I have couple of websites, which I want to implement a specific picture on. I want it to be controlled (along with a hyperlink) from one script. So what I've done is this:
<?php include 'http://content.captive-portal.com/pd/sponsored/sponsored.php' ?>
I have placed this code on couple of websites but it doesn't display a picture. Why? Can it be done this way?
The page I placed this script on is this one:
amc link - the image should appear just underneath a logo. The gif image from the script above. Can anyone please help me out with this? What have I done wrong? can't it be done? THank you for your help.
The code is here:
<div id="wrapper">
<img id="logo" src="images/logotop_m.jpg"/>
<?php include 'http://content.captive-portal.com/pd/sponsored/sponsored.php' ?>
</div> <!--eo wrapper -->
...
Is the relative path causing the issue? Does the sponsored.php file make reference to the image using a complete path? (e.g.... http://content.captive-portal.com/images/.... or just images/...)
The reason for that is that some images are being used via relative links. Here's the logo:
<img id="logo" src="images/logotop_m.jpg"/>
As it isn't an absolute path with a domain, it'll resolve as the following:
http://yourdomain.com/images/logotop_m.jpg
Instead of what you're expecting:
http://amc.captive-portal.com/images/logotop_m.jpg
Edit: Oops
I didn't notice the redirect as I opened it in a new tab - my bad. The php file itself contains this:
<p><img src="http://content.captive-portal.com/pd/sponsored/sponsored.gif" width="480" height="80"></p>
As it's an absolute path, it *should* be alright.
I'm having problems with the paths to my first wordpress theme. Post images and stuff not related to css is located in wordpress_folder/blog-images/ and in index.php when I link to images I use this path: blog-images/img.jpg
The problem is now that when I want to link to the same image from another file (not index.php) in this case single.php wich displays one blog post, the correct path is now ../../../blog-images/img.jpg
This is causing problems in the includes like sidebar etc. sidebar.php works fine when called from index.php but the images path is changed if sidebar.php is called from single.php.
Does anyone know what's going on?
If you are creating these links from within php scripts, I would suggest using the site_url() function to get the URL for your wordpress install and then appending your images path to the end of that. If you are editing static theme files like css, then you should use /wordpress_folder/blog_images/img.jpg.
Something like <img src="<?php echo site_url() ?>/blog_images/img.jpg" /> should be sufficient from theme files.
The reason that paths are chaning is because if you are in wordpress_folder then the path blog_images/img.jpg resolves to wordpress_folder/blog_images/img.jpg but if you are on a post that has the url yoursite.com/wordpress_folder/2011/09/category/my_great_post then the path would resolve to wordpress_folder/2011/09/category/blog_images/img.jpg which is obviously incorrect.
For this reason you should try to use the absolute path or full URL so that no matter what file/folder/url you are linking from, the path will always be correct.
The main downside you may run into is that if you were to change the name of your wordpress folder, or remove it altogether, then you may need to make a lot of edits to reflect that. But in any case, you should put the / in front of your path so that it can be referenced the same from everywhere.
Also check out the site_url() reference page, it lists some other helpful functions at the bottom that may be useful to you.
I thought this was a little unclear from drew's answer, so I am adding a little bit more in a separate answer. His advice is sound and I agree with him.
If you prepend a url with a / then it will navigate based on your site url. Without the slash it uses relative navigation.
So here are some examples for www.mydomain.com
//always shows the image located at http://www.mydomain.com/myfolder/pic.png
//no matter what the url is
<img src="/myfolder/pic.png" />
//shows the image located relative to the current path
//if current url is http://www.mydomain.com/posts/ then the image will come from
//http://www.mydomain.com/posts/myfolder/pic.png
<img src="myfolder/pic.png" />
If you are creating links dynamically from php side then you will want to use site_url().
If you are creating links to your theme directory folder then you will want to use bloginfo('template_directory')