StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWordpress - setting a base href
text
Body
copied!<p>I'm developing a wordpress theme locally and I'm trying to set a base URL for all my images / JS in my wordpress theme. I've tried the standard <code><base href="http://localhost:8888/wp-content/themes/my-theme/" /></code> which does work for my JS and image file (which aren't in the CSS) but it makes my menu links not work.</p> <p>I've also tried <code><?php bloginfo('template_directory');?></code> which will make the link to my logo image work, but all my images included in my js don't. I've got a supsersized slideshow running as the background image.</p> <p>Obviously I can use absolute file paths - <a href="http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg" rel="nofollow">http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg</a> - but I'm certain there must be another way that will work.</p> <p>The js for my slideshow images is as follows</p> <pre><code>jQuery(function($){ $.supersized({ //Functionality slideshow : 1, //Slideshow on/off autoplay : 1, //Slideshow starts playing automatically start_slide : 1, //Start slide slide_interval : 10000, //Length between transitions transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 500, //Speed of transition new_window : 1, //Image links open in new window/tab pause_hover : 0, //Pause slideshow on hover keyboard_nav : 1, //Keyboard navigation on/off performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) //Size & Position min_width : 0, //Min width allowed (in pixels) min_height : 0, //Min height allowed (in pixels) vertical_center : 1, //Vertically center background horizontal_center : 1, //Horizontally center background fit_portrait : 1, //Portrait images will not exceed browser height fit_landscape : 0, //Landscape images will not exceed browser width //Components navigation : 1, //Slideshow controls on/off thumbnail_navigation : 1, //Thumbnail navigation slide_counter : 1, //Display slide numbers slide_captions : 1, //Slide caption (Pull from "title" in slides array) slides : [ // Slideshow Images {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg'}, {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image2.jpg'} ] }); }); </code></pre> <p>Any advice would be greatly appreciated.</p> <p>Thanks</p> <p><em><strong></em>* UPDATED <em>*</em></strong></p> <p>Ok, thanks to Pekka, I've got halfway there..</p> <p>The code in my header.php file now reads</p> <pre><code><script type="text/javascript"> template_directory = "<?php echo bloginfo('template_directory');?>"; </script> <script type="text/javascript" src="<?php echo bloginfo('template_directory');?>/js/main-site.js"></script> </code></pre> <p>and in my main-site.js file I've got</p> <pre><code>{image : 'template_directory' + '/images/slides/image1.jpg'} </code></pre> <p>but it just won't display the background images. I've tried with/without the trailing slash - assuming the syntax is incorrect?</p> <p>Any advice? :)</p> <p><em><strong></em> UPDATED - AGAIN <em>*</em></strong></p> <p>Noticed the '' around template_directory.Now the images are showing BUT the links in my menu aren't working anymore :S</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload