Saturday, 11th Mar 2017

«

»

Print this Post

How to enable Homepage Panes in Graphene Theme

Last week I changed the layout of my site’s homepage. Earlier it was showing my latest posts. But now it is displaying a welcome note and post excerpts of some latest posts in two columns. This is actually a Graphene theme feature. After I made changes in frontpage layout, some of the Graphene theme users started to ask me, “How did you change your front page look?” Well, in this post I’m gonna show you how to enable Homepage Panes in Graphene Theme. Please note that Homepage Panes can be enabled only when using static frontpage in your site.

First step: Create a new Page with some content in it, like welcome note. Of course, give it a title.

If you want to show your recent posts somewhere else just like the homepage, then create another blank page and call it Blog or something like that.

2nd step: Go to Settings–>Reading settings

3rd step: In Reading Settings–> Front page displays, select “A static page“. Then select the welcome page that you created in the first step for Front page.

If you want to enable WordPress’s blogging functionality, then select Blog as Posts page. Your recent posts will be displayed in that page.

4th step: Click on Graphene Options under Appearance.

5th step: In Graphene Options–> General–> Homepage Panes, select the “Type of content to show“, i.e Latest posts/Latest posts by category or Posts and/or Pages. Then enter the “Number of posts to display” of your choice. (example: 6 or 8). Then save Settings.

That’s all!! Now open your site and check whether the panes are showing up properly or not.. πŸ˜‰

Bug: There is a bug in Graphene 1.5.5 which replicates the post excerpts in panes. To solve this issue, open footer.php file and remove this line,

<?php do_action( 'graphene_bottom_content' ); ?>

This bug has been fixed in Graphene 1.5.6

You can hide the welcome message page by adding this code to custom CSS


.post-id {
display:none;
}

and replace
post-id
with the id of the welcome page.

Using firebug to get post-id

Leave comments. Thank you! πŸ™‚

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..

49 comments

Skip to comment form

  1. Ivan

    Thank you very much, but is there any way to set up this view with posts? I have a dynamic web site.
    Also I have a lot of problem with the home page slider. I selected the thumbnails and excerpts view in a three columns template so the slider have widht:450px height:180px.
    But as you can see in this img http://imageshack.us/photo/my-images/521/schermata112455888alle0.png/ I have the excerpt problem.
    I tried to insert in theme functions.php some lines found on web for adjust excerpts’ lenght but don’t work.
    Can you help me with this problem?

    1. Prasanna SP

      Hi Ivan, I think it is not possible to use post in static frontpage.

      And yes, I also had the same problem with post excerpts in slider. Then I managed to fix this by restricting the slider content area hight to 165px in Graphene options, and adding the below code to custom CSS. Note that I’ve decreased the slider post title font size.
      My custom CSS code for slider is here –

      .featured_slider { 
       
      	margin-bottom: 5px;
       
      	padding-bottom: 20px;
       
      	padding-top: 5px;
       
      }
      .slider_post h2 a, .slider_post h2 a:visited {
      	font: normal 16px georgia;
      }
      1. Ivan

        I’ve decreased the title and now it’s ok. Thank you very much. Can you write down an “how to” post about the child theme of graphene?

        1. Prasanna SP

          Sure, I’ll post a write up about creating child themes for Graphene theme. Thank you for your comment Ivan,

  2. Prasanna SP

    Thank for your comment SPHR. Please visit this blog again. I will post some interesting write ups like this..

  3. Luko

    Hy,
    I’m unable to post anything in graphene support forum at this moment, so… πŸ™

    Is there any way to move slider below posts when using homepage panes? Your answer on graphene.forum is apply only when homepage panes are NOT using.

    1. Prasanna SP

      Hmm.. That’s tricky. Try this,

      1. Disable slider

      2. Install WP PHP widget

      3. Add graphene_bottom_content hook in Graphene Options –> Advanced –> Action Hooks Widget Areas –> loop.php –> graphene_bottom_content

      4. Drag PHP widget to Graphene Bottom Content block in Appearance –> Widgets

      5. Add this code in that PHP widget


      <?php if(function_exists('graphene_display_slider')){
      echo graphene_display_slider();
      }
      ?>

      6. Save the widget

      This hack is working in my test site – http://test.prasannasp.net

      1. Luko

        Great, working perfect. Thanks.
        You have great blog BTW.

        1. Prasanna SP

          You have great blog BTW.

          Thanks Luko!

      2. saltspringer

        Just tried that fix, but it didn’t work for me.

        Is ‘Graphene Bottom Content’ the same as ‘Graphene After Post Content’? Because I don’t see the former, but I see the latter…

        Thanks…

        1. Prasanna SP

          No, they are different hooks. You may see graphene_bottom_content hook in /includes/theme-loop.php

  4. Jim

    Hi Prasanna, nice site you have and noticed you have done quite a few nice things with the Graphene theme. By default, the Graphene slider displays only on blog front page, can you please advise how do you display the slider on other pages like what you have done, and also how do you change the slider bullet to green and red color. Thanks for your help.

    1. Prasanna SP

      Hi Jim, I’ve explained how to show slider on single post in Graphene forum. Please follow these steps, http://forum.khairul-syahir.com/general-talk/slider-on-postsingle-page#post-12818

      Changing the bullet color is done by editing the sprite image (graphene/images/sprite_master.png). There you can see two white and gray circles, change its color.

      Let me know if you want any further assistance. I will be happy to help you.

      Thank you for visiting my site. Have a great day!

  5. Helmut

    Hi Prasanna!

    IΒ΄d like to make an additional Posting at the top of the BLOG-Page, Like its possible on the Frontpage.

    Is there a Trick..? πŸ˜‰

    Good Bye!

    Helmut

    1. Prasanna SP

      Yes, you can! Use action hook widget (Graphene Options –> Advanced –> Action hooks widget areas –> loop.php and pick an action hook) and restrict it to the blog page using Widget Logic plugin.

      Thanks for visiting my site! πŸ™‚

  6. Helmut

    Thanx for thie fine Theme and grand support!

    OK.. IΒ΄m looking forward to try it, like you suggest! πŸ˜‰

    Byebye

  7. David

    I am trying to use the tip you provided above about the slider being moved to the bottom, but all it is showing is the php code you provided. I made sure I didn’t miss any of the syntax and followed your steps exactly as written. Any advise?

    1. Prasanna SP

      Hi David, it seems the above code is working in your site! πŸ™‚

      – Prasanna SP

      1. David

        Yes, thanks for your help…it was a syntax issue with a space between the < and ? at the beginning of the code…

        1. Prasanna SP

          Yes! I’ve corrected it now.. πŸ™‚ Sorry for the inconvenience..

  8. Jocelyn

    Awesome and excellent website! I’m rather impressed to read this. Here is great information what I was looking for a long time. And it is really important to me. And I will try it to use it in my blog also. Thanks for this great share.

  9. Adam

    This is some really great info and I love your tweeks. One thing I like that you’ve done is put a background to your homepage panes excerpts. It aligns everything nicely.

    How did you do that – background and alignment? If you look at what I’ve got at http://blog.thinkplanrun.com it seems the panes are pushed to the sides and there is some floating space in the middle. suggestions?

    1. Prasanna SP

      Hi Adam,

      Here is the CSS I’ve used to style my homepage panes,

      .homepage_pane {
      padding: 10px;
      height: 270px;
       
      border-radius: 20px 20px 20px 20px;
       
      background:#E1EDFA;
      background: -moz-radial-gradient(center, ellipse cover,  #FFFFFF 0%, #E1EDFA 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#FFFFFF), color-stop(100%,#E1EDFA));
      background: -webkit-radial-gradient(center, ellipse cover,  #FFFFFF 0%,#E1EDFA 100%);
      background: -o-radial-gradient(center, ellipse cover,  #FFFFFF 0%,#E1EDFA 100%);
      background: -ms-radial-gradient(center, ellipse cover,  #FFFFFF 0%,#E1EDFA 100%);
      background: radial-gradient(center, ellipse cover,  #FFFFFF 0%,#E1EDFA 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E1EDFA',GradientType=1 );
       
      	-moz-box-shadow:0 0 4px #7FB8F5;
      	-webkit-box-shadow:0 0 4px #7FB8F5;
      	box-shadow:0 0 4px #7FB8F5;
       
      }
       
      .two-columns .homepage_pane {
          width: 45.4% !important;
      }
  10. Berenice

    This was really useful! Thank you very much! I was also wondering, is there a way to hide just the title of a page, a specific page, like you do with .post-id display:none ? Thanks in advanced!

  11. Berenice

    Nevermind I got it!! Thank you so much again for this post, take care πŸ™‚

  12. Flami

    Hallo! I m girl italy!
    I not speack englesh. I read your SITE con istruction fron traslate by Chrome.
    You are big man!
    tank’s for School :)))

    kiss
    Flami (Italy/Rome/Anzio sea)

    1. Prasanna SP

      Thank you Flami! πŸ™‚

  13. alfredo

    Hello:
    First of all thank you for your work and your Graphene Theme.
    My question: Is it possible to have a static home page with no featured image above?
    My other question: You tell “You can hide the welcome message page by adding this code to custom CSS”.

    post-id {
    display:none;
    }

    and replace
    post-id
    with the id of the welcome page.
    where can i find my static page’s id?

    Thank you very much for this site

  14. Carrie

    I want to hide front page and lonly have a slider and widgets. I have used the following code
    .post-401 {
    display: none;
    }

    but nothing happens. Is there another way to achieve this?

    1. Prasanna SP

      Try

      #post-401 {
      display: none;
      }

      Also, make sure post-401 is the ID of your static front page.

  15. Agnes

    Hello,
    I would like to put two or more widgets in the graphene bottom content widget area. Could you please tell me how I can put them in line? I would greatly appreciate.

    Agnes

  16. Speed up your PC now

    Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically
    tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  17. Diogo

    Hello,
    I used the following code to hide the content of the homepage:

    . {post-id
    display: none;
    }

    But I want to hide the title of the page and also the start button “read more”.

    Could you help me.
    Thank you!
    http://www.ronam.com.br/wordpress/

    1. Prasanna SP

      Go to Graphene Options –> Homepage Panes and disable Homepage Panes. Then add this code to Custom CSS.

      #post-2 {
          display: none;
      }
      1. Diogo

        Thank you so much!

  18. Mike R.

    Hello, first I want to thank you for your sharing of knowledge on the Graphene WP theme. It has been extremely helpful in several of my web projects. I currently am building a personal homepage where my static front page would display RSS feeds in the homepage panes. I’ve tried a couple of RSS feed plugins, but it seems as if I can’t get the information to display on the main page within the homepage pane windows, only after clicking “read more” and opening the page/post does it display the RSS information/data. Any ideas? Thanks so much in advance.

  19. Andrea155

    Hi Prasanna and many thanks for helpinmg!
    my site http://www.salvatoristudioingegneria.com was reralizzato with Graphene. How BBefore page is a page with 2 horizontal bars blue, without any possibility to edit them and create bread.
    I tried to create a welcome page as you explained, renfdendola static, but I can not put images and text within delΓ²le two riche blue.
    Can you help me?
    If I try to make the home page static ruin me, not not making me see the table created with wp-table.
    Can you help me?
    Grazie!!!

  20. inlorm

    Hello Prasanna
    You have been superb. I did the homepage panes set up and it was super, the only BIG problem I have is I set up for 10 recent posts and they all looked jumbled that is each post is somewhat on top of the other but not truly aligned like yours is. I also used the code you suggested for the .css and it now has a beautiful nice blue with rounded corners much like you have here but they are not flowing in a single column. The next help I need is how do I get back a slider on my other page , the one that says ‘latest news’ without having a slider on every single page. Please help me out here I am a total novice and when I saw this website (prasannasp.net) I was overjoyed.

    1. Prasanna SP

      Hi inlorm! Use the below CSS for full width homepage panes.

      .homepage_pane {
          height: auto;
          width: 97% !important;
      }

      To show slider on Latest News page, put the below code to your child-theme’s functions.php file.

      <?php
      function graphene_display_slider() {
      if ( is_home() || is_front_page() ) {
      graphene_slider();
      add_action('wp_footer', 'graphene_scrollable');
           }
      }
       
      function custom_enqueue_scripts(){
                  if ( is_home() || is_front_page() ) { 
                          wp_enqueue_script( 'graphene-jquery-tools' ); // jQuery Tools, required for slider
                  }
          }
          add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' ); 
      ?>
  21. inlorm

    Hello Prasanna
    I just tried your suggested .css and .php codes and now my page is most magnificent !!!

  22. inlorm

    Hello Prasanna
    Please enlighten me on how to modify this border .css for all my pages and/or my posts. Thanks much

    `.homepage_pane {
    padding: 10px;
    height: 270px;

    border-radius: 20px 20px 20px 20px;

    background:#E1EDFA;
    background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #E1EDFA 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#FFFFFF), color-stop(100%,#E1EDFA));
    background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FFFFFF’, endColorstr=’#E1EDFA’,GradientType=1 );

    -moz-box-shadow:0 0 4px #7FB8F5;
    -webkit-box-shadow:0 0 4px #7FB8F5;
    box-shadow:0 0 4px #7FB8F5;

    }

    .two-columns .homepage_pane {
    width: 45.4% !important;
    }`

  23. inlorm

    Hello Prasanna
    Please enlighten me on how to modify this border .css for all my pages and/or my posts. I just have my homepage panes looking good with this code but would like to have the same look for all my pages. I just reposted this same message because I have not heard a response and thought it was just at the bottom of the pile. Thanks much

    `.homepage_pane {
    padding: 10px;
    height: 270px;

    border-radius: 20px 20px 20px 20px;

    background:#E1EDFA;
    background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #E1EDFA 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#FFFFFF), color-stop(100%,#E1EDFA));
    background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    background: radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FFFFFF’, endColorstr=’#E1EDFA’,GradientType=1 );

    -moz-box-shadow:0 0 4px #7FB8F5;
    -webkit-box-shadow:0 0 4px #7FB8F5;
    box-shadow:0 0 4px #7FB8F5;

    }

    .two-columns .homepage_pane {
    width: 45.4% !important;
    }`

    1. Prasanna SP

      Sorry inlorm, I didn’t notice your reply earlier. If you want to have same style for posts ans pages, replace .homepage_pane with .post, .page

      Example,

      .post, .page {
      border-radius: 20px 20px 20px 20px;
       
      background:#E1EDFA;
      background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #E1EDFA 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#FFFFFF), color-stop(100%,#E1EDFA));
      background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
      background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
      background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
      background: radial-gradient(center, ellipse cover, #FFFFFF 0%,#E1EDFA 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FFFFFF’, endColorstr=’#E1EDFA’,GradientType=1 );
       
      -moz-box-shadow:0 0 4px #7FB8F5;
      -webkit-box-shadow:0 0 4px #7FB8F5;
      box-shadow:0 0 4px #7FB8F5;
      }
  24. Scott Tucker

    Very great post. I just stumbled upon your blog and wished to say that I have really enjoyed surfing around
    your blog posts. After all I will be subscribing for your feed
    and I am hoping you write once more very soon!

  25. christian

    how to add next and previous button to navigate the past post

  26. Damien

    Hi Prasanna

    Thank you very much for this wonderful guide. I am really pleased with my homepage now but for some reason the “Read more” links have stopped working?

    I have tried deactivating all plugins but it doesn’t make a difference? I am sure I have or haven’t done something wrong! Is there a setting I am not using?

    Keep up the great work with your fantastic site!

    Many thanks

    Damien

  27. Jozef

    Hello

    I also use Graphene theme with a static front page. I want the persons in the picture shows their heads and torso.
    Not like it’s pictured here https://drive.google.com/file/d/0B1o2_FWWBl6bUHdsdUVNR1BQMGs/view?usp=sharing. You know please advise me what code needs to be changed and where the in theme.

    Thank your for your response

  28. Jozef

    Hello Prasanna

    I also use Graphene theme with a static front page. I want the persons in the picture shows their heads and torso. Not like in this picture https://drive.google.com/file/d/0B1o2_FWWBl6bUHdsdUVNR1BQMGs/view?usp=sharing
    You know please advise me what code needs to be changed and where in the theme.

    Thank you for your response

  29. Audrey

    You are my hero today! I have been trying to do something like this for months, but finally found the right words to use to search and get this tutorial.

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.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close