Adding slider to child theme, not working.

ThemeShaper Forums » Thematic

[closed]

Adding slider to child theme, not working.

(11 posts)

Started 9 years ago by photoman
Latest reply from tarpontech
This topic is resolved

Tags:

photoman
Member

Hi,

I was hoping wondering if someone could help me out. I'm building my first child theme which is based on the Thematic Feature Site and am trying to add the jquery plugin easySlider to my home page.

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

I've done a ton of reading through this forum and can't get it to work. I am adding the following code to my functions file which I modified from ian's post here http://forums.themeshaper.com/topic/best-way-to-add-additional-jquery-scripts:

// Add extra javascript to the childtheme
function childtheme_scripts(){
?>

<script type='text/javascript'>
var childtheme_url = '<?php bloginfo('stylesheet_directory') ?>';
</script>

<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/js/easySlider.js'></script>
<?php
}

add_action('wp_head', 'childtheme_scripts','10');

When I add the code to my wordpress functions file I get a parse error in wordpress and it breaks my site.

Parse error: syntax error, unexpected '}' in /x/wp-content/themes/thematicfeaturesite/functions.php on line 109

I've run the code through php designer and it says there are no syntax errors so I can't figure out whats going wrong!

Can anyone help?

Posted 9 years ago #
helgatheviking
Moderator
try:
```
define('CHILDTHEME_URI', get_stylesheet_directory_uri() . '/');

function childtheme_panel_add_stuff() {
wp_enqueue_script('easy_slider', CHILDTHEME_URI . 'js/easySlider.js');

}

add_action('wp-head', 'childtheme_panel_add_stuff');
```
I've defined the theme location as a constant b/c i use it all over my files and this way i dont have to keep re-using get_bloginfo. also if that doesn't work try hooking the function onto init instead of wp-head. i am not really sure which it should be
Posted 9 years ago #
photoman
Member

Thanks very much. I used

add_action('init', 'childtheme_panel_add_stuff');

which worked great!!

Posted 9 years ago #
photoman
Member

Sorry I forgot to ask. Now my easySlider.js is showing up in my header I need to call the following script to get it to run:

$(document).ready(function(){
$("#slider").easySlider({
prevText: 'Previous Slide',
nextText: 'Next Slide',
orientation: 'vertical'
});
});

Could someone show me an example of the code I would add to add this to my child theme, I'm guessing it goes in functions.php also?

Posted 9 years ago #
photoman
Member

I managed to get this working but am still having a slight issue with the javascript options. I changed the code a bit:

//jQuery
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');

//jQuery easySlider
function easyslider() {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://mysite.com/js/easySlider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider').easySlider({ auto: true, speed: 800 });
});
</script>
<?php
}
add_action('wp_head', 'easyslider');

I can't get the auto option working. I was wondering if this is to do with the function being "ready" rather than being told to start when the page loads. Anyone any ideas?

Posted 9 years ago #

tarpontech
Member

try adding the action to thematic_before instead of wp_head

add_action('thematic_before', 'easyslider');

I just finished up a child-theme of the Featured, so we're pretty much in the same boat.
I keep trying to add jQuery the "right way", using deregister et.al, with no results.

here's a cut-n-paste from my functions.php, this works, and hasn't broken any other jquery plugins on the site (yet). Different slideshow, same general idea. Hope it helps get you working...

//add front page javascript for slider 

	function shabadoo_front_page_javascript() { 

	if (is_front_page()) { ?>

		<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/jquery.coda-slider-2.0.js"></script>
		<script>
			jQuery().ready(function() {
				jQuery('#coda-slider-1').codaSlider({
					autoSlide: true,
					autoSlideInterval: 18000,
					autoSlideStopWhenClicked: true,
					autoHeight: false,
					dynamicArrows: false,
					dynamicArrowLeftText: "left",
					dynamicArrowRightText: "right",
					dynamicTabs: false,
					dynamicTabsAlign: "center",
					dynamicTabsPosition: "bottom",
					panelTitleSelector: "",
					slideEaseDuration: 1000,
					slideEaseFunction: "easeInOutExpo"
			  });
			});

		</script>

	 		<?php }
					}
	add_action('thematic_before', 'shabadoo_front_page_javascript');

Posted 9 years ago #

cypress34
Member

Hi.. I wish I can help out here, but I use a different jquery slider for my blog which is Nivo Slider, and I was able to implement it after 2 days of trial and error. What I did was place one line of php code on my feature php file, set my rand to (1, 1) on functions.php and what took me long is the css, which would effect in case I want to use the other feature php file if I want to feature something without using the slider.

Posted 9 years ago #
photoman
Member

Hi,

I'm managed to get everything working today using the same code I posted above. I updated to the latest version of my jquery slider and it started working so I'm guessing there was a problem with the old file or a bug in the javascript.

A big thank you to everyone for your help. :)

Posted 9 years ago #
Robo
Member

Any chance of a link to where you have implemented it?

Posted 9 years ago #
sowingseeds
Member

Not sure if this will help but I implemented this (easyslider) in a theme two days ago. See it at http://racheloliver.eu/paintings. If this is similar to what you are looking for then: I function in_head_js(){
?>
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/easySlider1.7.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider1").easySlider({
numeric:true,
numericId: 'controls1'
});
jQuery("#slider2").easySlider({
numeric:true,
numericId: 'controls2'
});
jQuery("#slider3").easySlider({
numeric:true,
numericId: 'controls3'
});
jQuery("#slider4").easySlider({
numeric:true,
numericId: 'controls4'
});
jQuery("#slider5").easySlider({
numeric:true,
numericId: 'controls5'
});
});
</script>
<?php
}
add_action('wp_head','in_head_js',33);

Not sure if I neeeded the '33' in the add_action... put it in hopefully not to get a conflict and when it worked left it!!

Posted 9 years ago #
tarpontech
Member

As an addendum to my first post on this, I've since looked further into my issues with adding jquery to wp_head and determined that the issue was specific to the jquery plugin (coda), that I was trying to implement.

Photoman's code is on-the-money for adding jquery to a thematic theme, as he can no doubt attest to.

Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.