How to enable Homepage Panes in Graphene Theme

Categories:

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!

Follow these topics Graphene, WordPress

Short Link:

Tags: Graphene Theme, Wordpress

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 ↓

Diogo
September 25, 2012 at 1:00 am (UTC 5.5) Link to this comment
Reply
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
  September 25, 2012 at 9:52 pm (UTC 5.5) Link to this comment
  Reply
  Go to Graphene Options –> Homepage Panes and disable Homepage Panes. Then add this code to Custom CSS.
  #post-2 { display: none; }
  1. Diogo
    September 25, 2012 at 10:48 pm (UTC 5.5) Link to this comment
    Reply
    Thank you so much!
Mike R.
October 19, 2012 at 12:59 am (UTC 5.5) Link to this comment
Reply
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.
Andrea155
November 10, 2012 at 3:39 pm (UTC 5.5) Link to this comment
Reply
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!!!

inlorm

December 15, 2012 at 9:11 pm (UTC 5.5) Link to this comment

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.

Prasanna SP

December 15, 2012 at 10:49 pm (UTC 5.5) Link to this comment

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' ); 
?>

inlorm
December 16, 2012 at 2:27 am (UTC 5.5) Link to this comment
Reply
Hello Prasanna
I just tried your suggested .css and .php codes and now my page is most magnificent !!!
inlorm
December 18, 2012 at 11:07 pm (UTC 5.5) Link to this comment
Reply
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;
}`

inlorm

December 22, 2012 at 7:10 am (UTC 5.5) Link to this comment

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;
}`

Prasanna SP

January 5, 2013 at 1:47 pm (UTC 5.5) Link to this comment

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;
}

Scott Tucker
December 30, 2012 at 3:16 pm (UTC 5.5) Link to this comment
Reply
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!

Page 3 of 4«1 234 »

View all comments

How to enable Homepage Panes in Graphene Theme

Update:

Follow these topics Graphene, WordPress

Share this Knowledge:

You'll love reading these posts:

About the author

45 comments

Diogo

Prasanna SP

Diogo

Mike R.

Andrea155

inlorm

Prasanna SP

inlorm

inlorm

inlorm

Prasanna SP

Scott Tucker

Leave a Reply Cancel reply

Search

Recent Posts

Support my Plugins

Email Subscription

Recent Comments

Twitter updates

Copyright