Saturday, 18th May 2013

«

»

Print this Post

How to enable Homepage Panes in Graphene Theme

Categories:

Graphene, Wordpress

November 22, 2011

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

Important!


Update:

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:

Share this Knowledge:


Never miss a post! Get my new articles directly to your inbox!
You can also subscribe to RSS feed or add my feed on Google Reader and My Yahoo!

Tags: ,

About the author

Prasanna SP

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

45 comments

Skip to comment form ↓

  1. Ivan

    November 22, 2011 at 4:24 pm (UTC 5.5) Link to this comment

    Reply

    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

      November 22, 2011 at 8:12 pm (UTC 5.5) Link to this comment

      Reply

      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

        November 23, 2011 at 4:33 am (UTC 5.5) Link to this comment

        Reply

        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

          November 23, 2011 at 11:23 am (UTC 5.5) Link to this comment

          Reply

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

  2. Prasanna SP

    November 23, 2011 at 9:52 pm (UTC 5.5) Link to this comment

    Reply

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

  3. Luko

    December 12, 2011 at 11:13 pm (UTC 5.5) Link to this comment

    Reply

    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

      December 13, 2011 at 12:06 pm (UTC 5.5) Link to this comment

      Reply

      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

        December 13, 2011 at 1:49 pm (UTC 5.5) Link to this comment

        Reply

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

        1. Prasanna SP

          December 13, 2011 at 7:41 pm (UTC 5.5) Link to this comment

          Reply

          You have great blog BTW.

          Thanks Luko!

      2. saltspringer

        May 10, 2012 at 4:11 am (UTC 5.5) Link to this comment

        Reply

        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

          May 13, 2012 at 2:18 pm (UTC 5.5) Link to this comment

          Reply

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

  4. Jim

    December 21, 2011 at 3:07 pm (UTC 5.5) Link to this comment

    Reply

    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

      December 21, 2011 at 3:15 pm (UTC 5.5) Link to this comment

      Reply

      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

    January 31, 2012 at 5:10 am (UTC 5.5) Link to this comment

    Reply

    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

      January 31, 2012 at 10:47 am (UTC 5.5) Link to this comment

      Reply

      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

    February 1, 2012 at 12:01 am (UTC 5.5) Link to this comment

    Reply

    Thanx for thie fine Theme and grand support!

    OK.. I´m looking forward to try it, like you suggest! ;)

    Byebye

  7. David

    February 11, 2012 at 2:27 am (UTC 5.5) Link to this comment

    Reply

    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

      February 11, 2012 at 4:21 pm (UTC 5.5) Link to this comment

      Reply

      Hi David, it seems the above code is working in your site! :-)

      - Prasanna SP

      1. David

        February 11, 2012 at 8:57 pm (UTC 5.5) Link to this comment

        Reply

        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

          February 11, 2012 at 9:04 pm (UTC 5.5) Link to this comment

          Reply

          Yes! I’ve corrected it now.. :-) Sorry for the inconvenience..

  8. Jocelyn

    February 13, 2012 at 12:41 pm (UTC 5.5) Link to this comment

    Reply

    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. Page 1 of 41234»

    View all comments

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.