In this tutorial I want to show you how to include “relative” links inside your WordPress posts using shortcode API.
By default, when you are creating a post and want to include an image to spice up your content, you would declare an img tag statement and a source link that looks something like this img src=”images/image.jpg”. But you quickly realize that your image isn’t showing up on your content and you’re not too happy about that. To fix this problem, you end up declaring the source as an absolute source location.
No big deal right? Maybe…Many times as developers we create and test everything “offline” on a local environment. If you declared an absolute source location to a live server, what if you were not connected to the internet? Will you be able to see the image then? Absolutely not. But then you might argue that, “I am never off the internet”. Maybe so, but consider this scenario — many times I take my laptop out to see clients at a coffee shop or wherever and there happens to be no internet connection or I just don’t want to signup for it but I want to show my client the site I built for them in all its glory. Since I pointed the source location to a live server directory, my images will not show up. I would have to change it to an absolute location locally for it to work but imagine having to do that for every posts/content/pages every time I meet my client to show them something. You get the point…
So what is the solution to this problem? I am glad you asked because I myself have been frustrated with this when I first started with WordPress as well. Now I want to pass this on to you guys so it makes your life easier. All hail the Shortcode API introduced since WordPress 2.5…
You simply open up your functions.php file within your theme folder and add the following code.
PHP:
< ?php
function myPostsLink() {
return get_option('home') . '/wp-content/themes/YOUR_THEME_FOLDER/';
}
add_shortcode('Posts', 'myPostsLink');
?>
Here we are simply declaring a function that returns the URL of your theme folder or whatever folder you choose. Then with the magic of the shortcode API, you can invoke the function “add_shortcode” with the first argument being the name of your choice and the second argument being the function name you are running.
After that, in your post, simply use “[SHORTCODE NAME]” or in this example “[posts]” and it will be replaced with the URL that you specified in the function. With this method, it will work in your local environment or on your live server without having to change it every time. Please keep in mind that the shortcode name is case-sensitive.
Armed with this technique, you can now use this to replace all your absolute links within your posts.
cool, thanks, works great! I’d like to post more but your comments feature won’t let me
Do you know of a way to define caption alignment separately from image alignment, for every image? e.g. left-align caption under a center-aligned image?
I’ve tried everything including inline style, which I can’t demo here because
doesn’t work in your comments
All I can do so far is make *all* captions left-aligned OR all captions centered, with this in the css:
.wp-caption {text-align:center}
But I need control over each individual caption.
thanks! - Val
Hi Val,
You don’t need to give it text-align, instead use margins to push it left or right depending on your preference.
For example .wp-caption { margin-left:-20px;}
Like so…
But I have hundreds of images + can’t define different margin for each one in css. I need a hack for the missing “Caption Alignment” in admin’s “Edit Image” panel. All I can choose is Image Alignment + wp gives caption the same alignment. I need, e.g. “right” for image align and “left” for caption align, so a caption is left-aligned directly under a rightalign image.
Can you figure a way to selectively impose an alignment on a caption regardless of it’s corresponding image’s position?
thanks!
It’s better if you show me where you want to change so I can see the code that you are working to tell you how to do it…
Show me the site that you want to change.
Hi Roy – thank you for your response. I’m converting my site into wordpress in wamp on my hard drive, so there’s no URL. The site I’m changing is greensmoothie.com – that’s in ‘s, not css. But you can see there’s lots of images and sometimes an image is right-aligned or centered, but if the caption text is very long, then I need it aligned left under the image. WordPress doesn’t seem to have that capability to separate caption alignment from image alignment.
thanks! Val
It is not WP’s job to align the images but the job of the designer. I assure you it can be done.
Once your site is up live, shoot me an email, I will help you out.
thanks! It’ll be a while
I tried in-line style in caption, to try force it to align differently from image-align, but it didn’t work, even when I used mime_type to stop wpautop from filtering it out.
Can you try playing with it? Try get a caption to alignleft with an image that is aligned right – without defining all captions to alignleft in the css, and without defining individual captions in the css.
How to selectively impose alignment on caption regardless of its image’s position?
@Val
While I don’t fully understand what you’re trying to do, based on my comprehension of your message, you are trying to selectively align text to the left under an image?
Anything that you do selectively, can be done with class assignments in CSS. If you wanted only a certain caption to be aligned left, you assign a class for that particular caption ONLY and inside your CSS you style it accordingly.
But it doesn’t make sense to selectively align a caption to be aligned left and when other captions are not. Or maybe I don’t fully understand what you’re trying to do.
Hi Roy – I got a sample page up:
http://www.greensmoothie.com/1gs/
And here I describe the problems with captions that I’m encountering in wordpress:
http://www.greensmoothie.com/tmp/roy.html
Best to open both pages at the same time in separate tabs
thank you for your kind help! – Val
If you want to link only to specific words in “Go to photos” simply place the anchor tag on ONLY that text. You don’t need to wrap the only thing in anchor tag.
As for the caption alignment under the photos, you don’t need to float the text left, the text should naturally fall on the left side per document flow and for the ones you do want centered, just give it some margin to push it over or text align those. You can have separate CSS one to control the caption that needs to be centered and one that needs to align left.
As for the tags WP puts in for you, you can download a plugin called RAW HTML Capability. That let’s you put in RAW code without having to fight with WP posts.
Have a look at this link CAPTION ALIGNMENT
Also could you email me instead so we can keep this post on topic royho @ 1plusdesign DOT com
Hi look that if u would use a relative path for u’re wordpress
u can use this simply function offers by WordPress GoodJoin
http://codex.wordpress.org/Template_Tags/bloginfo
Hi Fabry,
Can you explain what you have posted have anything to do with relative links inside a post?
Hi Roy – please can you tell me how to change this line
get_option(‘home’) . ‘/wp-content/themes/…
so that it returns the URL of my root folder (where wp-config.php is)? As you mention, the above returns the URL of theme folder.
I have a lot of folders and files that are off the wordpress root folder (but are not part of wordpress) that I need to refer to relatively from within posts, with something like:
a href=”[root]/articles/one.html”
Thanks also for your reply in forums, very helpful – Val
Then you would use something like this.
return get_option(‘../home’) . ‘/’;
Hi Roy – that returns:
http://articles/one.html
whereas my wp-config (wordpress root folder) is in:
http://localhost/1gs/
so I tried this:
return get_option(‘home’) . ‘/’;
and it gives:
http://localhost/1gs//articles/one.html
whereas I need:
http://localhost/1gs/articles/one.html
- single slash after /1gs
I can do this in Edit Post:
a href=”[root]articles/one.html”
and get the correct single slash:
http://localhost/1gs/articles/one.html
But I’d prefer to make it consistent with the relative image link, namely (I’ve used ‘rel’ in place of your ‘Posts’):
img src=”[rel]/imgpg/top.gif”
a href=”[root]/articles/one.html”
Is there a way to change the functions.php so as to eliminate that extra slash? This produces the double slash:
return get_option(‘home’) . ‘/’;
thanks! – Val
Something tells me your site structure is not setup correctly..
Why would you have http://articles and http://localhost on the same server?
articles should be within the localhost not at the same level…
It is really hard to give you help since I don’t exactly know why you’re doing the way you’re doing. Perhaps if you could draw up a clear tree structure of your site, it would be easier to help you. Currently it seems you have a static site but then you have WordPress inside another folder…etc. Do you still need the static site since you’re switching to WordPress?
Hi Roy – sorry you misunderstand.
your: “return get_option(‘../home’) . ‘/’;” gives the link: http://articles/one.html
whereas I need the function to give me the link: http://localhost/1gs/articles/one.html
/1gs is where wp-config is. I need the function to return WP root folder, not theme folder.
Now my edit “return get_option(‘home’) . ‘/’;” will take me to WP root so long as I enter it in Edit Post as: a href=”[root]articles/one.html”
I’d prefer to be able to enter it as a href=”[root]/articles/one.html” – in other words find a way to delete a / from “return get_option(‘home’) . ‘/’;”
It’s not critical
I can enter in my Post “[rootfolder]articles/name.html” + “[themefolder]/images/name.jpg” – just have to remember that one takes a slash + the other doesn’t.
thanks, Val
@Val
If you want to omit one slash simply use “return get_option(‘home’);”
Above returns the “home” address set inside your WP admin settings and if you change it to “siteurl” then it returns the WordPress web address inside your WP admin settings.
Hope that helps…
Hi Roy – return get_option(‘home’); displays [root]/articles/one.html as: http://localhost/articles/one.html – whereas my wordpress URL in settings is
http://localhost/1gs — I’m trying to get the function to return: http://localhost/1gs so I can enter in post: [root]/articles/one.html and the link will display as http://localhost/1gs/articles/one.html.
My blog URL in settings is also http://localhost/1gs so ‘siteurl’ gives the same wrong link: http://localhost/articles/one.html.
So neither ‘home’ nor ‘siteurl’ are returning the correct URL’s in settings – unless of course I add ” . ‘/’;” in which case [root]/articles/one.html will display as http://localhost/1gs//articles/one.html – with the double slash.
thanks! – Val
WARNING !!
I tried this and it works for an image or two except that after doing it to a few images it broke my theme and gave me the white screen of wordpress death.
while it was breaking it gave me a couple of errors about already adding headers or something and then did an academy award winning western flick death.
very dramatic
I am sorry to hear your problem but I can a sure you it wasn’t caused by the technique I provided.
When you have security header errors, it usually means you have did something wrong in your functions.php file where either you have empty space/line or extra commas somewhere.
Please double check…
nice share, good
article, very usefull for me…thank you
You’re welcome, glad I could help!
works great. I changed it so I can link to any page (relative link), in case web site URL changes. Thanks
Awesome…glad it is working for you!