Monday, 28th Jul 2014

«

»

Print this Post

Graphene Slider on other pages

By default Graphene theme shows Slider only on frontpage. But you can display the slider on other pages by using a child theme. It needs some coding knowledge, but it is not so difficult to do that. Follow these steps to get slider on other pages as well.

(If you’re already using child theme in your site, you can skip 1st and 2nd steps)

Important!

See – Graphene Child Theme Template. It has all the necessary files for your theme modifications

1st Step – Creating child theme for Graphene theme : Create a new folder called graphene-child in WordPress themes directory (wp-content/themes/).

2nd step – Creating style sheet for child-theme : Create a style.css file inside the graphene-child folder and add the below code into it.

/*
Theme Name: Graphene Child
Theme URI: http://example.com/
Description: Child theme for the Graphene theme
Author: Your name here
Author URI: http://example.com/about/
Template: graphene
Version: 1.0
*/
@import url("../graphene/style.css");
/* Your modification goes here */

Now go to Appearance –> Themes and activate Graphene Child theme.

3rd Step – Creating functions.php file in child theme : Create a blank functions.php file in graphene-child folder and paste this code into it.

<?php
function graphene_display_slider(){ 
graphene_slider();
add_action('wp_footer', 'graphene_scrollable'); 
}
 
function custom_enqueue_scripts(){
            if ( ! is_admin() ) { // Front-end only
                    wp_enqueue_script( 'graphene-jquery-tools' ); // jQuery Tools, required for slider
            }
    }
    add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
?>

This shows Slider on every page of your site. You can restrict the slider to specific pages using Conditional tags like this,

function graphene_display_slider(){
if (is_single() || is_front_page()){
graphene_slider();
add_action('wp_footer', 'graphene_scrollable');
     }
}

This restricts the slider to appear on frontpage and posts page only. Some other conditional tags are,

is_page()
is_home()
is_archive()

etc.., Click here for more information about WordPress Conditional Tags. Read this post for more information on modifying the Graphene theme using a child theme.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

6 comments

Skip to comment form

  1. Helmut

    THX! Work great!

    1. Prasanna SP

      Hi Helmut, you should add this code too,

          function custom_enqueue_scripts(){
                  if ( ! is_admin() ) { // Front-end only
                          wp_enqueue_script( 'graphene-jquery-tools' ); // jQuery Tools, required for slider
                  }
          }
          add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

      Otherwise, slider won’t scroll. This applies only if you’re using version 1.6 and later.

  2. Devesh Agarwal

    Hey Prasanna,

    When i add this code into child theme functions.php. It works but on top of the page it shows the entire code.
    What to do??

    snapshot: http://tinypic.com/view.php?pic=281eiow&s=5

    Thanks for everthing you have done so far.

    1. Devesh Agarwal

      Sorry Prasanna,

      I have not include php function syntax properly.
      Now its fine.

      1. Prasanna SP

        I’m glad it helped you. BTW, what’s the URL of your site?

  3. gica

    Dear Prasanna,
    I need your help, if it is possible. I have your child theme in graphene. Now, I want to introduce a fire efect in the text of the header of my web page. I have no idea how to do it: where must I put the jquery and the plugin that is commented in this article?
    (http://www.pensamientoscomputables.com/plugin-jquery-animacion-fuego-generador-texturas.html)
    By the moment, I have a static efect with shadows in the header text, but how can I make it “live”? Thanks a lot.
    Gica.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.