WordPress.org

Ready to get started?Download WordPress

Forums

New Multi-Column Page Template (17 posts)

  1. James
    Member
    Posted 6 years ago #

    Hey,

    I have my blog's home page I'm trying to edit. I'm trying to get it to have two columns, and on the left hand side would use have some welcome text and a few "Recent Posts" below it (All I'd want is their links, similar to what the sidebar widget offers). In the second column I wanted to add a block of Google Adsense, and then maybe have recent comments below that.

    I'm not sure if these features I want there at the moment are static, I may want to swap column content, put one above the other, etc. It'd be nice if I could just create a widgets for this paticular page or something, but I'm not sure how feasible something like this would be. The main thing I'm concerned with is getting my home page to the two column point in the first place.

    What I've done so far was created a new template (I named it welcome.php), and I borrowed all the code from my page.php template. Now I know I'm suppose to edit this new template I just created, but I don't exactly know how.

  2. Joni
    Member
    Posted 6 years ago #

    Hmm. I'm not at my usual computer so I'm thinking in my head here. You can have widgets anywhere and as many as you want as long as you name them uniquely and put the code where WP can find it. I've seen themes that had sidebar widgets and two or three, or four even, footer widgets.

    But first, the template. I guess you'd first create a #wide-content division (because I assume you won't have the traditional sidebar on this welcoming page). Within that two left and right floated boxes. Those are your two columns.

    I am thinking maybe instead of a post or static text, you could use a text widget for the welcome message on the left, the recent posts widget below that, and on the right, a text widget for the google adsense code, and recent comments widget underneath that?

    If that's so, then you can create these right and left "sidebars" for lack of a better word and widgetize them.

    So here's a basic example of what your page should look like:

    <div id="widecontent">
    <div id="col-left">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-left') ) : ?>
    </div><!-- /col-left -->
    <div id="col-right">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-right') ) : ?>
    </div><!-- /col-right -->
    <div class="clearer"></div>
    </div><!-- /widecontent -->

    Now, in your functions.php file, you need to add this code so that WP can find these new widget areas.

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'col-left',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
    register_sidebar(array('name'=>'col-right',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
    ?>

    As far as styling is concerned, since most of these widgets are presumed to be in the sidebar, and the sidebar is generally structured like an unordered list, you'll need to swipe some styles from the #sidebar section of your style sheet. But you should be able to get up and running with this.

    I'll try to play with this concept more once I'm home. (The alternative at home is to mow the yard or do laundry and ... eh, I'd rather code!) :)

  3. James
    Member
    Posted 6 years ago #

    That sounds great, like the perfect thing I'd want to do.

    I should say though that I disabled sidebars throughout my theme (All the pages and posts take up the whole screen-"wide"), so will these code snippets override that certain function? And will I be able to control these new widgets from the "Manage > Pages" section or the "Design > Widgets" section of the admin panel?

    I'm still using the headers and footers though, so no differences there.

    Also, I wanted to make sure I'm adding this code into the right places, as when I tried to update my functions.php file, it gave my entire administration panel parsing errors (probably because I entered into the wrong place). So does the first block of page code replace my entire welcome.php file? And where is the appropriate place to enter the second block within functions.php? (As I don't want to get errors again.)

    (I totally hear you about the household chores to, website administration is 100X better :).)

  4. Joni
    Member
    Posted 6 years ago #

    If you're not using the sidebars at all, in your functions.php file, ditch the other code and just replace it with what I've posted. It should work fine.

    For the page template, the code I provided is just the heart of it, so you'll need to retain the rest of the template code. I don't know what theme you are using and don't have a site link (if there's one there, I overlooked it), but hopefully you can figure out where to insert the page code. ;)

    Hmm. I'm thinking here. It may very well be that WP won't recognize that widget code unless it's in sidebar.php or footer.php. :( Footer.php is where it is on my template (that is using both sidebar and footer widgets). So I may have misspoken there. But file names are just file names.

  5. James
    Member
    Posted 6 years ago #

    The code which you posted earlier "is" what I put in my functions.php, and it gave the admin errors, so what's the code I'm suppose to ditch? As I said, I want to make sure I put your code in the right place within the functions.php file.

    My theme still has sidebars, but I just turned them off for my posts and pages (my theme gives you an option to do that).

    I placed your first code block into my welcome.php file, so I'm pretty sure that's working OK, but I can't tell for certain (or edit anything) until I get my functions.php file correct.

    Also, my site's link is on my member page's website field. And I'm using the royale 1.3 WP theme:
    http://www.onehertz.com/portfolio/wordpress/

  6. Joni
    Member
    Posted 6 years ago #

    I assumed since you had a sidebar you weren't using that it was widgetized. That functions php file should work, I swiped it directly from one that is working here:

    http://stonefieldvillas.org

    J

  7. James
    Member
    Posted 6 years ago #

    Well, I thought all sidebars use widgets by default, so yeah, either way, mine does use widgets already. I found this first line of code in my functions.php specifically:

    <?php
      if (function_exists('register_sidebar')) {
        register_sidebar();
        register_sidebar();
        register_sidebar(array('name'=>'Royale Top'));
        register_sidebar(array('name'=>'Royale Bottom'));
      }
      load_theme_textdomain('royale');

    So maybe I'm suppose to edit this and integrate the new sidebar you posted somehow, rather than just flat-out adding to it.

  8. Joni
    Member
    Posted 6 years ago #

    Yeah. This should work then:

    <?php
      if (function_exists('register_sidebar')) {
        register_sidebar();
        register_sidebar();
        register_sidebar();
        register_sidebar();
        register_sidebar(array('name'=>'col-left'));
        register_sidebar(array('name'=>'col-right'));
        register_sidebar(array('name'=>'Royale Top'));
        register_sidebar(array('name'=>'Royale Bottom'));
      }
      load_theme_textdomain('royale');
  9. James
    Member
    Posted 6 years ago #

    Thanks, I'm not having any errors on the admin side anymore. I've spent an hour or two trying to get this welcome.php page I created to work properly, but it's always giving my homepage syntax errors.

    Here's my original page template, which works fine:

    <?php
    	get_header();
    	$alwayssidebars = get_option('royale_always_show_sidebars');
    	if ($alwayssidebars) {
    		if (get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    ?>
    	<td id="content" class="<?php echo ($alwayssidebars ? 'narrow' : 'wide'); ?>column">
    
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    		<div class="post" id="post-<?php the_ID(); ?>">
    		<h2><?php the_title(); ?></h2>
    			<div class="entry">
    				<?php the_content('<p class="serif">'. __('Read the rest of this page','royale') .' &raquo;</p>'); ?>
    
    				<?php link_pages('<p><strong>'. __('Pages','royale') .':</strong> ', '</p>', 'number'); ?>
    
    			</div>
    			<div style="clear: both;"></div>
    		</div>
    	  <?php endwhile; endif; ?>
    	<?php edit_post_link(__('Edit this page','royale'), '<p>', '</p>'); ?>
    
    	</td>
    
    <?php
    	if ($alwayssidebars) {
    		if (!get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && !get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    
    	get_footer();
    ?>

    And here's an example of what I've tried:

    <?php
    
    /*
    Template Name: Welcome Page
    */
    ?>
    
    <?php
    	get_header();
    	$alwayssidebars = get_option('royale_always_show_sidebars');
    	if ($alwayssidebars) {
    		if (get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    ?>
    
    <div id="widecontent">
    <div id="col-left">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-left') ) : ?>
    </div><!-- /col-left -->
    <div id="col-right">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-right') ) : ?>
    </div><!-- /col-right -->
    <div class="clearer"></div>
    </div><!-- /widecontent -->
    
    <?php
    	if ($alwayssidebars) {
    		if (!get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && !get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    
    	get_footer();
    ?>

    It seems like no matter where I place that code within my new template, I get syntax errors. Is there anything I seem to be missing to display these new sidebars properly?

  10. Joni
    Member
    Posted 6 years ago #

    If you aren't using those other sidebars, then maybe the code shouldn't be there. I'm headed out to dinner (the only thing I'm making for dinner tonight is reservations!) and will be back in a couple of hours and I'll try to test it on one of my sites. Ciao til then.

  11. James
    Member
    Posted 6 years ago #

    Alright, cool.

    I'm not using any sidebars besides the new ones you created for the template, so what exactly is the code that shouldn't "be there"?

    Sidebar code from the headers and footers? (Because I tried removing it, to no avail.)

    Or fro the functions.php? (Because I don't want to go into editing certain parts I'm not sure with, which'll probably give admin errors again too.)

  12. Joni
    Member
    Posted 6 years ago #

    What code shouldn't be there? This for one thing:

    <?php
    	if ($alwayssidebars) {
    		if (!get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && !get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    
    	get_footer();
    ?>

    That is, if you aren't using it. And you say you aren't. That theme seems pretty convoluted to me.

  13. James
    Member
    Posted 6 years ago #

    Well, I already tried adding just the code you gave me:

    <?php
    
    /*
    Template Name: Welcome Page
    */
    ?>
    
    <div id="widecontent">
    <div id="col-left">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-left') ) : ?>
    </div><!-- /col-left -->
    <div id="col-right">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-right') ) : ?>
    </div><!-- /col-right -->
    <div class="clearer"></div>
    </div><!-- /widecontent -->

    Then I tried as you just suggested now:

    <?php
    
    /*
    Template Name: Welcome Page
    */
    ?>
    
    <?php
    	get_header();
    	$alwayssidebars = get_option('royale_always_show_sidebars');
    	if ($alwayssidebars) {
    		if (get_option('royale_sidebar1_left')) include (TEMPLATEPATH . '/sidebar.php');
    		if (get_option('royale_3columns') && get_option('royale_sidebar2_left')) {
    			include (TEMPLATEPATH . '/sidebar2.php');
    		}
    	}
    ?>
    
    <div id="widecontent">
    <div id="col-left">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-left') ) : ?>
    </div><!-- /col-left -->
    <div id="col-right">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-right') ) : ?>
    </div><!-- /col-right -->
    <div class="clearer"></div>
    </div><!-- /widecontent -->

    And both still get syntax errors, specifically lines like this:

    Parse error: syntax error, unexpected $end in /home/username/public_html/lightningshock/wp-content/themes/royale-10/welcome.php on line 29

  14. Joni
    Member
    Posted 6 years ago #

    I tried setting it up here.. and it works.. up to a point. I've lost all styling for some reason. And if you click on any other pages, the second half of the "sidebar" widgets (from right-col) show up.

    http://wordpress.mytestbed.com

    So .. maybe this isn't gonna work or maybe I just need to sleep on it. ;)

  15. James
    Member
    Posted 6 years ago #

    Hmmm, just seems odd that mine still get syntax errors, could it have something to do with being connected to the main index template php file, or maybe sidebar.php not reading something. I'm not sure, I'm kind of tired at the moment so I'm just thinking of other possible areas of my theme conflicting or something.

    Thanks for all the help so far, Joni :).

  16. James
    Member
    Posted 6 years ago #

    I've looked over the code you gave me once more, and I noticed it doesn't have this closing it anywhere:

    <?php endif; ?>

    I'm suppose to have this in the new page php somewhere, like this, so it works:

    <?php
    
    /*
    Template Name: Welcome Page
    */
    ?>
    
    <?php
    	get_header(); ?>
    
    <div id="widecontent">
    <div id="col-left">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-left') ) : ?>
    <?php endif; ?>
    </div>
    <div id="col-right">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('col-right') ) : ?>
    <?php endif; ?>
    </div>
    <div class="clearer"></div>
    </div>
    
    <?php
    	get_footer(); ?>

    But I still get the styling conflictions (bullet points, micro-fonts, etc.) you mentioned before, and all the widgets are still on one left column.

    Am I suppose to edit my style.css or something to insert and edit those divs to get them to look OK?

  17. James
    Member
    Posted 6 years ago #

    OK Sorry, never mind about that styling questions there, me just being silly ;).

    The only thing right now I'm working on is getting the second sidebar to appear on the right hand side of the screen (It's just below it now). I guess I'll just play around for now to see if I can figure it out, if not, I'll bump this thread to ask for assistance.

Topic Closed

This topic has been closed to new replies.

About this Topic