[Peter CParticipant]

Hi,

So I’ve added a link to a CSS file in the head file, which I’ve placed in my child theme folder…

But my problem is that the CSS file has relative paths to other elements, but can’t find them.

Example….

develophealth.com/light-box-test/Boxaroo/css/skin1.css

but it should actually be looking here:

develophealth.com/wp-content/themes/x/Boxaroo/css/skin1.css

How can I correct this?

Thanks

Peter

[ChristopherModerator]

Hi there,

Would you put the exact code you are using and the path so we can take a look at it.

Thank you.

[Peter CParticipant]

Here’s the code in the header file:

  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Boxaroo/js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>
  
  <script type="text/javascript">
  jQuery(document).ready(function(){
  jQuery('.Boxaroo').Boxaroo({ 'skin' : '1' });
  });
  </script>

The actually page: http://develophealth.com/light-box-test

[Kosher KMember]

Hi Peter,

you can use get_stylesheet_directory_uri()

e.g. <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />

more info here -> http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

Also, please make sure to set-up a child theme and add all your file to your child theme directory

e.g. it should be here -> x-child-[your-stack]/Boxaroo/css/jquery-Boxaroo-1.8.css

hope that helps.

Cheers

[Peter CParticipant]

I think the problem is that the script cannot find the “skin” file because it’s using relative paths… So when it’s calling the file it calling from the current page and not the child theme root directory.

[Kosher KMember]

Hi Peter,

Since you mentioned this

develophealth.com/wp-content/themes/x/Boxaroo/css/skin1.css

The problem I can see is because you have added the file directly in X core framework (Parent theme) and not in your child theme.

You must never add nor modify anything inside X core file as it will be overwritten during X update.

The get_stylesheet_directory_uri() function returns the directory of your active theme style.css

So if you activate X framework get_stylesheet_directory_uri() will return your-site.com/wp-content/themes/x/

and if you activate X child theme, it will return your-site.com/wp-content/themes/x-child-[your-stack]/

Then you can simply put your file inside x-child-[your-stack]/Boxaroo/css/skin1.css

and having this code <?php echo get_stylesheet_directory_uri() ?>/Boxaroo/css/jquery-Boxaroo-1.8.css will return

your-site.com/wp-content/themes/x-child-[your-stack]/Boxaroo/css/jquery-Boxaroo-1.8.css

Hope that clarifies

[Peter CParticipant]

when I’m grabbing the 2 JS files… How would I put that in the head?

[Kosher KMember]

Simply add this code below in your child theme functions.php

add_action('wp_head','additional_head_script');
function additional_head_script() {
 echo '<script type="text/javascript" src="'. get_stylesheet_directory_uri().'"/your-js-dir/my.js"></script>';
}

[Peter CParticipant]

If I add this function to functions.php, do I still have to add it to the header.php?

[Peter CParticipant]

meaning can I add the links to the style sheet and JS files with adding to the functions.php?

[Kosher KMember]

You don’t need to add/edit _header.php to add additional head tag elemets.

Simply used wp_head hook -> http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head

X theme already declared do_action('wp_head'); in _header.php so you can take advantage to hook anything on that action.

Cheers

[Peter CParticipant]

Thanks for your patience… Here’s what I put in the functions.php… and of course it broke the page 🙂

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

add_action('wp_head','additional_head_script');
function additional_head_script() {
 echo '<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>';
}

add_action('wp_head','additional_head_script');
function additional_head_script() {
 echo '<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />';
}

[Kosher KMember]

Hi There,

You cannot have something like this

echo '<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>';

and declaring echo two times with php open tag and close tag on the echo string

echo '<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />';

and do not simply copy function with the same name and changing the function code. those 3 things is the reason that broke your site.

You can do it like this

add_action('wp_head','additional_head_script');
function additional_head_script() {
	echo "\n".'<script type="text/javascript" src="'. get_stylesheet_directory_uri() .'/Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>'."\n";
	echo '<link rel="stylesheet" href="'. get_stylesheet_directory_uri() .'/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />'."\n";
}

or if you are confuse with function strings you can simply do your function like this to add text,script or HTML code inside your function without using echo and being careful with echo string. noticed the php closing tag after the opening tag of a function and php opening tag right before the closing tag of a function

function additional_head_script() { ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/Boxaroo/css/jquery-Boxaroo-1.8.css" type="text/css" media="all" />
<?php
}

Hope that helps

[Peter CParticipant]

ok I added that to the functions.php file, but there is nothing there when I look for that file???

http://develophealth.com/wp-content/themes/x-child-renew/functions.php

[Peter CParticipant]

And the code isn’t being added to the head

[Author]

Posts