Integration into your theme

If you want to integrate a SmoothGallery into your theme you can use the WordPress SmoothGallery plugin. There’re two ways to do this:

  1. You want a gallery in your sidebar? Use the widget.
  2. You want a gallery somewhere in your theme? Follow the developer howto.

Sidebar widget

Hint: The widget is pretty new. I’ll improve it soon…

The plugin comes with a widget that displays a gallery in your sidebar. This way it’s very easy to insert a gallery because you don’t need to know how to write PHP code. Since the widget renders the gallery inside an iFrame you can add as many galleries as you want.

There’re various options that you can change on the edit screen for every widget. The first thing you should do though is supplying the ID of a post or a page where you uploaded the images. Once you’ve done that the widget should work as expected displaying the images from the given post/page. If it doesn’t work check the value for imgsize: this has to match the values for the thumbnails under Settings – Media.

Developer Howto

All you have to do is to implement the function insertSmoothGallery in the file config.php; you can find it under wp-content/plugins/smoothgallery. Depending on your implementation the plugin makes sure that the CSS and JavaScript will be included inside your page; keep in mind that this won’t work if the SmoothGallery sits inside an iFrame.

Let’s say you want a timed gallery on the page with the id 4711 somewhere in your theme that’s 400×80 pixels. Open the file config.php and implement the insertSmoothGallery function like this:

function insertSmoothGallery() {
  # add all the conditional tags you're using to the array
  if (assert_functions_exist(array('is_page')) === false)
    return false;
 
  if (is_page('4711')) {
    return array('width'  => 400,
                 'height' => 80,
                 'timed'  => 'true');
  }
  return false;
}

Once you’ve done that put the HTML markup for the gallery somewhere inside your theme and you’re all set. No matter how you implement the function don’t remove the call to assert_functions_exist.

As you can see, I used the conditional tag is_page. These come in handy if you’d like to display the gallery on some specific pages only – if you don’t want that but a gallery on each and every page just remove the if statement and the corresponding curly brackets.

Just add another sidebar…

Instead of implementing the clumsy insertSmoothGallery function you can simply add another sidebar to your theme if you like that better. Think of it as a placeholder for widgets. It doesn’t necessarily have to be a vertical bar on the side – some horizontal thing in your header or footer is okay too.

So, maybe you want to have a look at the Widgets API and learn how to add another sidebar to your theme. Check out register_sidebar and dynamic_sidebar in particular; the page about the second function tells you how to manage Multiple Sidebars in your theme.

I wrote a post about adding a sidebar to your theme, just three easy steps that should be easy to follow if you’ve got a basic understanding of PHP and themes in WordPress.

Still not convinced? Maybe you’d like to read Ian Stewart’s We Need To Kill The Sidebar.

Message from Test-King We offer self paced SY0-201 training program for developers. Download the 642-813 tutorials and 70-680 study guide to learn some of useful web applications for your web project.

99 comments ↓

Newer comments »
  • Danny says:
    February 11, 2008 at 1:39 pm
    Hi Christian, this is a sweet plugin, exept I cannot activate it as I get the
    “Plugin could not be activated because it triggered a fatal error.”
    Message.
    I’ve tried deactivting all my other plugins, and checked for the call to the header and footer, but no luck.
    Any ideas what the problem might be?
  • Christian Schenk says:
    February 11, 2008 at 5:58 pm
    Hi Danny,
    please have a look at this comment.
  • Paul says:
    March 16, 2008 at 3:41 am
    Great plugin but I can’t get it to work. What am I not doing?

    I’ve uploaded the plugin and activated it, but when i put

    function insertSmoothGallery() {
  return array('width' => 400,
               'height' => 50,
               'timed' => 'true');
}

    in to my Main Index Template all that shows up on my page is the actual words and it doesn’t show the plugin.

  • Christian Schenk says:
    March 16, 2008 at 11:37 am
    Hi Paul,
    you’ll have to edit the file smoothgallery.php that comes with the plugin. Open it and search for the function insertSmoothGallery and insert your code there.
  • Paul says:
    March 16, 2008 at 6:42 pm
    Thanks for the quick reply but when I went in the smoothgallery.php file and changed the first function that says return false to the code above I still get the same problem.
  • Dave Von Bieker says:
    March 17, 2008 at 7:43 pm
    This looks like a simple solution, but when I load my index page I get a big white blank where the image should be.

    You can see it here … http://www.bodycreativenetwork.com

    Any help would be greatly appreciated, thanks!

  • mas says:
    March 31, 2008 at 12:21 am
    Ok I edited the smoothgallery.php already, plugin activated already and how to insert smoothgallery.php in my index.php?

    Do I have to put include smoothgallery.php? how do you do it?

  • Christian Schenk says:
    April 1, 2008 at 2:27 pm
    Hi mas,

    how do you do it?

    This video shows you how I did it.
    Activate the plugin, implement insertSmoothGallery, insert the markup in your theme and you’re done. If it still doesn’t work read the FAQ or write me an e-mail.

  • U.S. Common Sense says:
    May 3, 2008 at 7:50 pm
    Hello Christian,

    Thanks for providing us with this plug-in which we can use. I have a question though regarding integrating the plug-in within the site for the latest articles.

    On my home page, I currently have a tabbed feature where my latest article is displayed. What I would like to do is replace that with the SmoothGallery plug-in so that it would grab the three most recent articles and their related images.

    I was trying to use the code from your example on the front page, and wrapping that around the existing code in my theme which displays the latest article, but with no luck. Can you provide us with a way to integrate the plug-in in that fashion? Or at least point us in the right direction?

    Thanks. :)

  • Christian Schenk says:
    May 5, 2008 at 6:25 am
    Hi everybody,

    Can you provide us with a way to integrate the plug-in in that fashion? Or at least point us in the right direction?

    This should be the feature you were looking for…

  • Justin says:
    May 6, 2008 at 7:04 am
    When you say “put the code for the gallery somewhere on your page” which code is that? Thanks!
  • Christian Schenk says:
    May 6, 2008 at 7:24 am
    Hi Justin,

    When you say “put the code for the gallery somewhere on your page” which code is that?

    That’s the HTML markup for the gallery. Thanks for the hint!

  • m says:
    May 15, 2008 at 10:31 pm
    What about using a gallery on one page only? I have mine on the front page but no where else. It works fine without error on this page. I used conditional wordpress tags in smoothgallery.php.

    All other pages give the error: invalid argument supplied for foreach() ….[file location] smoothgallery.php on line 94. This line is looking for key values but finds none since the gallery is only on the one page.

    What do I add to smoothgallery.php to avoid this little error?

  • m says:
    May 15, 2008 at 10:43 pm
    Answering my own question…

    in smoothgallery.php: make sure you double check your work when adding function insertSmoothGallery. Don’t change return false;.

  • Irene says:
    May 16, 2008 at 5:33 pm
    (implementing smooth gallery into theme)

    I tired to enter the code below into my wp-config.php file. Because of a statement below the code, according to the instructions as to how I understand it. I didn’t see a config.php file so I used the wp-config.php file. I also installed the smoothgallery files into my plugin directory.

    Now I just get this message when I get to my site.

    Parse error: syntax error, unexpected ‘}’ in /home/jaxel/public_html/sodafox/sodafoxblog/wp-config.php on line 28

    (code inserted)
    function insertSmoothGallery() {
    return array(‘width’ => 400,
    ‘height’ => 50,
    ‘timed’ = ‘true’);
    }

    (instructions)
    If you want to integrate a SmoothGallery into your theme you can use the WordPress SmoothGallery plugin. All you have to do is to implement the function insertSmoothGallery in the file config.php.

  • Christian Schenk says:
    May 17, 2008 at 10:54 am
    Hi Irene,
    have a look at the directory wp-content/plugins/smoothgallery: you’ll find a config.php there. Insert your code into this file.
  • Lizza says:
    May 28, 2008 at 2:08 pm
    Hi Christian,

    Thanks for this fab plug in! I’m just having trouble getting it to work. I amended the congif.php file in the smoothgallery folder:

    function insertSmoothGallery() {
  return array('width' => 550,
               'height' => 250,
               'timed' = 'true');
}

    And then I inserted this code in my home.php file

    Corker Issue 2: Winter 2008 is out now
Will Kevin Rudd deliver on all his election promises?
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Glam Punk
We feature pieces from Aussie designers Trimapee and Robby Tjia
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Walking on thin ice
One drug user and two nurses openly talk about their experiences with ice.
<a href="http://tocome" title="open image" rel="nofollow"></a>
 
Plastic Palace Alice
Listen to our exclusive interview with this Aussie band
<a href="http://tocome" title="open image" rel="nofollow"></a>

    And it is coming up with just words on the page. See http://corkermag.com/blog/

    What am I doing wrong?

    Thanks in advance.

  • Steve says:
    May 29, 2008 at 4:44 am
    Ok, there is some serious misunderstanding on my part.

    I am trying to install the plugin on my home page and I get nothing.

    Here is what I did:

    1. uploaded & activated the plugin

    2. added this code to the config file (in the plugin directory):

    function insertSmoothGallery() {
  return array('width' => 380,
               'height' => 250,
               'timed' => 'true',
               'showInfopane' => 'true',
               'showArrows' => 'true',
               'showCarousel' => 'true',
               'embedLinks' => 'true');
}

    3. placed this in my header file: insertSmoothGallery();

    4. in homepage file: insert_recent_images_box(5);

    5. created a test post with an image.

    Nothing displays on the home page. I want the carousel to display the images from the last 5 posts.

    What am I missing?

    Thanks.

  • Christian Schenk says:
    May 29, 2008 at 3:30 pm
    Hi Steve,
    step three isn’t necessary. Have you used WordPress’ built-in Media Library to upload and attach the image to the post? Have you tried using the special tag inside the post? Does the latter work?
  • Zolud says:
    June 13, 2008 at 5:52 pm
    Hi, Christian. Is this version compatible with WP 2.0?
    And is there a “Gallery Set” function?
    Thanks a lot from Ukraine :-)
  • Christian Schenk says:
    June 15, 2008 at 9:30 am
    Hi Zolud,

    Is this version compatible with WP 2.0?

    I haven’t tested the plugin with WP 2.0 but just give it a try ;-)

    And is there a “Gallery Set” function?

    If you want images from some set in a gallery you have two options:

    1. attach images to a post/page, in the edit-post-screen scroll down to the bottom and copy the markup somewhere into the post; watch this.
    2. I’m working on an integration with Flickr – you’ll be able to create galleries based on set/favorites from Flickr.

      3. Since the second option currently doesn’t work and if you’re using WP 2.0 you won’t have the “Media Library” (do you?), so option one isn’t possible either. I suggest, that you update WP to 2.5 or wait until I’ve included support for images from Flickr.

  • RSimpson says:
    June 20, 2008 at 1:19 pm
    Hi Christian,

    I’m experiencing a bug in FireFox. The gallery loads, there’s a black flash on the screen, then the first image fades to white before the second loads without the fade transition.

    The page is the link I’ve set in the website field in this comment form. I’ve got the gallery loading as part of my theme so I haven’t included the smoothgallery custom field.

    Any ideas?

    Cheers,
    Robert

  • Christian Schenk says:
    June 20, 2008 at 3:11 pm
    Hi Robert,
    hm strange, I can’t see the error here and I’ve tried it with Firefox (2.0.0.14) and Safari (3.1.1): the transition looks fine for me. I’m sorry, but I can’t help you with that.
    BTW: If you’ve integrated the gallery into your theme with the insertSmoothGallery function, you don’t need the custom field. So that should be okay.
  • Bong says:
    July 24, 2008 at 9:28 am
    Hi!

    I was looking for a plugin that will show images in a nice way and I was glad I stumbled on your plugin. I want to integrate nextgen smooth gallery in the theme. I’m not a coder so I rely on cut-and-paste instructions.

    But I was stumped with the how to on integrating it with the theme.

    First, the plugin directory of the site I’m working on looks like this…

    mydomain.com/wp-content/plugins/nextgen-smooth-gallery/

    Do we have to rename the nextgen-smooth-gallery folder to smoothgallery?

    Inside the nextgen-smooth-gallery folder are the following:
    1. /smoothgallery ==> another folder
    2. nggsmooth.php
    3. nggsmoothframe.php
    4. nggsmoothsharedfunctions.php
    5. readme.txt

    Inside the /smoothgallery folder are the following:
    1. /CSS ==> another folder with images and CSS.
    2. /Scripts ==> a folder with JavaScript files only.
    3. License.txt

    My best bet for what passes as config.php is nggsmooth.php so I placed the function insertSmoothGallery there above all the other functions. My dashboard went blank. I also watched the videos.

    BTW, I have NextGen itself installed and running. Fact, the the images are showing great in the plugin settings page. If I can only make it appear on the front page… this is embarrassing but I’m also lost on the HTML mark-up to insert the gallery into the index.html or home.php.

    Thanks. :)

  • Christian Schenk says:
    July 24, 2008 at 10:04 am
    Hi Bong,
    this plugin is just about SmoothGallery – if you’d like to integrate SmoothGallery with NextGen, you should ask these guys.
    However, if you decide to use this plugin I will of course help you to integrate it on your website; just write me an email.
  • Gregg says:
    August 28, 2008 at 2:22 am
    Hi Christian,

    I am integrating this into my theme, but it displays the box with the arrow but no image. I am so close! I have checked the path to the image and it’s there. I am stumped. If you have any ideas I would really appreciate it.

    -Gregg

  • Amir says:
    September 4, 2008 at 7:39 am
    Hey Christian

    Nice Plug-In you got going here. I’m trying to install it, but once I do all the steps you’ve put in the instructions I get no change visible. I’ve activated the plug-in, and pasted the markup text in the main index template so that it would show up after the header. I then went into the config.php, saw this

    function insertSmoothGallery() {
	return false;
}

    Which I then replaced with this

    function insertSmoothGallery() {
  return array('width' => 550,
               'height' => 250,
               'timed' => 'true');
}
  • Vincent says:
    September 8, 2008 at 6:10 am
    I am getting this error on ALL my pages and blog posts:

    Fatal error: Call to undefined function insertsmoothgallery() in wp-content\plugins\smoothgallery\smoothgallery.php on line 94

    I have added the code to config.php:

    function insertSmoothGallery() {
  return array('width' => 400,
               'height' => 50,
               'timed' => 'true');
}

    The plugin seems to be breaking the wp_header() code on WordPress 2.6.1.

  • Salman says:
    September 8, 2008 at 4:55 pm
    Hey man thanks for the great plugin.

    im having some trouble with installation.. i did everything youve requested (im trying to include the plugin as part of my theme on the home page i.e. display featured posts) and you keep mentioning insert the HTML markup in the header.

    Could you please tell me WHAT html markup? im new to programming so i have no idea how to call the plugin on my home page?

    PS i think a lot of people are trying to use this to display their featured posts… maybe a tutorial just on that???

    thanks!

  • Sebastien Page says:
    September 17, 2008 at 9:58 pm
    That’s a great plugin however I am having a bit of an issue. I installed it and played with the plugin enough to have it work (that’s what I thought!).

    The plugin displays the images and everything but I get an error message at the top and bottom of my page saying:

    Warning: Invalid argument supplied for foreach() in /home/.minni/xxxxxx/iphonedownloadblog.com/wp-content/plugins/smoothgallery/smoothgallery.php on line 97

    Line 97 is : foreach ($parameters as $key => $value) {

    I really don’t know what to do here.

    Any help would be greatly appreciated. Thanks

  • Christian Schenk says:
    September 18, 2008 at 6:10 pm
    Hi Sebastien,
    if you changed the insertSmoothGallery function and it doesn’t return false or an array that holds the options for the gallery, the foreach statement will break apart.
    Just replace this function with the original one and everything should be okay. If you want to integrate the gallery into your theme and you want to change that function make sure to either return an array or false.
  • Sebastien Page says:
    September 18, 2008 at 6:32 pm
    Thanks for the quick reply :-)

Leave a Comment