How to Hide Sidebar then Extend Page to take full width
-
Hey Guys
I’m need some assistance one a two step process. I’ve figure out how to hide the side bar on specific pages. But once I do that the page that doesn’t take up the entire length of the theme. The sidebar widgets are gone but the page stays at its normal width, I would like to extend it to take full advantage of the theme.
To hide the sidebar I added this into the pages.php
<?php if (is_page(‘200’)) : ?>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif; ?>–
Now my question is, I how do we extend page no#200 to take the full length of the screen/theme. I have read that you need to do something along the lines of this :
<div class=”myclass”>
<div class=”<?php if (!is_page(‘x’)) : ?>myclass<?php else : ?>myclasswider<?php endif; ?>”>
and
.myclass {
width:800px
}
.myclasswider {
width:1000px
}But where does this go ??? in the pages.php file ? or somewhere else. Or is the code just mention above wrong. If someone can point me in the right direction on how to extend the page once i’ve removed the sidebar that would be greatly appreciated.
if you need example code from the site please let me know as it might make things easier.
-
please post a link to your site, pointing to the page in question, if you would like to get some suggestions.
your theme might be using ‘body_class()’ which would give you a css class to target the page;
.page-id-200this is the page in question :
unfortunately your theme does not use ‘body_class()’, therefore you are right, you need to add a special css class to one of the divs, possibly to
<div id="container">or to
<div id="left-div">(try to locate the code either in page.php (or index.php) or haeder.php)
example:
<div id="left-div" <?php if(is_page(200) echo 'class="widepage"'; ?>>and in style.css, add a new line:
#left-div.widepage { width: 930px; }(there might be some background images involved; this might need extra tweaking)
Ok I’ve located the <div id=”container”> and <div id=”left-div”> location, they are in the Page.php file. Here is a snipet of what the code looks like :
<?php get_header(); ?>
<div id=”container”>
<div id=”left-div”>
<div id=”left-inside”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!–Start Post–>
<span class=”single-entry-titles” style=”margin-top: 18px;”></span>
<div class=”post-wrapper”>Now question is .. where and what do i type, I’ve tried entering the code you mentioned :
<div id=”left-div” <?php if(is_page(200) echo ‘class=”widepage”‘; ?>>
but it doesnt work. also you mentioned that once you enter this code in you also have to enter this code :
#left-div.widepage { width: 930px; }
in the sytles page .. i did that and it doesnt work.
So if you could please be a little more specific i’d greatly appreciate it.
So to get it all clear, where do i put the code, exactly what piece of code do i put and does it the other piece of code need to go into the sytles.css page, and where ?
Thanks for the help
is the edited code active at the moment?
if not, please activate it again so someone could check if the changes are showing on page 200 (are you sure the page id is 200 ?).
also put the additional css back into style.css.or try:
<div id="left-div" <?php if(is_page('online-store') echo 'class="widepage"'; ?>>I’ve tried placing :
<div id=”left-div” <?php if(is_page(‘online-store’) echo ‘class=”widepage”‘; ?>>
in the pages.php file and it errors out on whatever line i put it on.
Im not sure what to do with :
#left-div.widepage { width: 930px; }
is this meant to go into the Style.css file ?
my mistake; add a bracket:
<div id="left-div" <?php if(is_page('online-store')) echo 'class="widepage"'; ?>>still fails.
where are you meant to put this piece of code … what section of the pages.php file ?
this is a snipet of the top section of the pages.php file
<?php get_header(); ?>
<div id=”container”>
<div id=”left-div”>
<div id=”left-inside”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!–Start Post–>
<span class=”single-entry-titles” style=”margin-top: 18px;”></span>
<div class=”post-wrapper”>
<?php if (get_option(‘egamer_integration_single_top’) <> ” && get_option(‘egamer_integrate_singletop_enable’) == ‘on’) { ?>
<div style=”clear: both;”></div>
<?php echo(get_option(‘egamer_integration_single_top’)); ?>–
where does it have to go ?
ok seems to work, now the footer has gone a little crazy.
this is whats in the page.php file now : check the bold
<?php get_header(); ?>
<div id=”container”>
<div id=”left-div”>
<div id=”left-div” <?php if(is_page(20012)) echo ‘class=”widepage”‘; ?>>
<div id=”left-inside”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!–Start Post–>
<span class=”single-entry-titles” style=”margin-top: 18px;”></span>
<div class=”post-wrapper”>and by doing it like that all the pages go a little crazy with the sidebar showing under the page and not on the left side
ok seems to be working but the only problem i have now is the footer is wonky.
also if i wanted to add another page what do i do ?
I know you have to add it to the bottom section of the sidebar :
Is this correct ?<!–Begin Sidebar–>
<?php if (is_page(‘20012′,’27391’)) : ?>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
<!–End Sidebar–>and then do you add this to the top section :
<div id=”left-div” <?php if(is_page(20012,27391)) echo ‘class=”widepage”‘; ?>>
and do you leave the #left-div.widepage { width: 930px; } as is ? or do you have to add more code in the styles.css page ?
Thanks
also if i wanted to add another page what do i do ?
you approach seems to be correct.
the ‘wonky’ footer might come from an erroneously deleted or ommitted
</div>in page.php (?)compare your current page.php with one from an unedited theme.
my above suggestions dont work. only the first page works the 2nd one doesnt work.
I have not made any other changes to the pages file nothing has been deleted or ommitted. the other pages work well, only the online store has the wonky footer.
let me know if you have any ideas on how to add the second page as my suggestions mentioned dont work
http://codex.wordpress.org/Function_Reference/is_page
try:
if(is_page(array(20012,27391)))only the online store has the wonky footer.
there might be a closing div in sidebar.php;
if so, you need to add this conditionally as well, in your code; for example, try:<!--Begin Sidebar--> <?php if (is_page(array(20012,27391))) : ?> </div> <?php else : ?> <?php get_sidebar(); ?> <?php endif; ?> <!--End Sidebar-->[edit: typing error corrected]
–
I am off for today – continuing with festive indulgence – back tomorrow.
hope you’ll manage to get this problem solved 😉No that doesnt work
Fatal error: Call to undefined function aray() in /home/capsulec/public_html/wp-content/themes/eGamer/page.php on line 68
will array looks like its correct but it doesnt work causes errors big time
- The topic ‘How to Hide Sidebar then Extend Page to take full width’ is closed to new replies.