WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] move post and page titles to the banner? (18 posts)

  1. RolandOfEld
    Member
    Posted 9 months ago #

    i would like to be able to move the H1 post and page titles to appear in the banner instead of the post and page itself.. is this possible?

  2. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    Yep, you could do that by modifying the header.php file (or overriding it if you're creating a child theme). You'd then need to add the title into the banner container within this template.

  3. RolandOfEld
    Member
    Posted 9 months ago #

    thanks for the reply.. my php skills are limited, could you show me the code needed to achieve this?

  4. RolandOfEld
    Member
    Posted 9 months ago #

    can anyone help me with this?

  5. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    Within header.php you'll see a section of code which looks something like the following...

    <div id="bannercontainer">
       <div class="banner row">
          <?php if ( is_front_page() ) {
             ...
             ...
          <?php } ?>
       </div> <!-- /.banner.row -->
    </div> <!-- /#bannercontainer -->

    You'll need to add the following code to the bottom of this section. It'll look something along the lines of the following...

    <div id="bannercontainer">
       <div class="banner row">
          <?php if ( is_front_page() ) {
             ...
             ...
          <?php }
          elseif( !is_home() ) { ?>
             <header class="entry-header">
                <?php if ( is_single() ) { ?>
                   <h1 class="entry-title"><?php the_title(); ?></h1>
                <?php }
                else { ?>
                   <h1 class="entry-title">
                      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to %s', 'quark' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
                   </h1>
                <?php } // is_single() ?>
             </header> <!-- /.entry-header -->
          <?php } ?>
       </div> <!-- /.banner.row -->
    </div> <!-- /#bannercontainer -->

    You'll then need to remove the section that we just added into header.php, from content-page.php and content.php. Also, if you're using the other post formats as well, you'll also need to remove this from those templates as well (eg. content-audio.php, content-aside.php etc). if you don't remove the code from these templates, then you'll end up with duplicate headers/titles.

    You'll also need to adjust the styles within style.css as you'll need to change the font colour so that it's using a lighter colour, since you've now added it to the dark grey banner.

    If you don't know what styles to change, I would recommend using the Firebug addon with Firefox or Chrome Developer tools in Chrome. These two tools will help you work out which styles will need to change.

  6. RolandOfEld
    Member
    Posted 9 months ago #

    thanks for replying
    i must be putting the code in the wrong part of the header.php becuase i keep coming up with syntax errors

    I am attempting to put the code in starting from elseif( !is_home() ) { ?>
    and ending in </header> <!-- /.entry-header -->
    on line 102

    have i got it totally wrong ?:)

  7. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    You also need to close the if statement with the corresponding brace.

    <?php } ?>

    If you're uncomfortable making html/php changes then I would highly recommend getting a developer to make them for you.

  8. RolandOfEld
    Member
    Posted 9 months ago #

    thanks again for the reply Anthony

    i have managed to put in the code for header.php and alter the style of the header text itself but i have had a few other issues arise as a result:

    1. on my home page the container holding my search widget spans 100% of the screen (as defined in grid 12_of_12) When i attempt to alter the width to make the Newly implemented page title and search widget appear at the same height horizontally, content on my page is altered with it.

    2. I cannot see the title in the banner on other pages other than home. In the code you provided above i see elseif( !is_home() ) { ?> .. i want it to be on all pages not just home.. do i need to change !is_home to something else?

    2. My search widget i have in the banner on my home pahe dissapears completely on all pages other than home page

    hope you can help - sorry to be a bother !

  9. RolandOfEld
    Member
    Posted 9 months ago #

    just to clarify, i have undid the changes i made and my search widget (which is located in the banner) is still missing

    all of my pages are using the front page template still.

  10. RolandOfEld
    Member
    Posted 9 months ago #

    update: have fixed question 1. found that grid 12_of_12 was also controlling content width...

    at my witts end with question 2 and 3 though O_O

  11. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    Try changing

    elseif( !is_home() ) { ?>

    to

    else { ?>

    The only way I can help with the search widget is if you provide a link to your site. If it was there before, and then you made a change and it's disappeared, then it's obviously something to do with the changes you made. You need to go back and look at what you changed and make sure you haven't altered any other code, left out any closing html or php tags or anything like that.

    I would highly recommend you use Firebug for Firefox or Chrome Developer Tools for Chrome, to look at the code and help with debugging your issues.

  12. RolandOfEld
    Member
    Posted 9 months ago #

    thanks for replying

    i tried changing elseif to else .. still no luck

    http://www.italianiaperth.com is the site
    RE search bar .. i undid all my changes and reverted back to stock quark theme (as apposed to my child theme) and the search bar is still missing :(

  13. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    If the the search widget is only displaying on the homepage, you've most like got the sidebar it's contained in, enclosed within an if statement that is checking is_front_page().

    You can read the Codex to find out exactly what this function does - http://codex.wordpress.org/Function_Reference/is_front_page

  14. RolandOfEld
    Member
    Posted 9 months ago #

    thats it!!

    i changed is_front_page to is_page to test and it works! side bar and header

    ideally i would like to remove the condition all together so that the search bar and header are always in the banner.. how would i achieve that?

  15. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    If you want the banner to appear identical on every page, then simply remove that whole if statement. (keeping the actual code inside the statement obviously)

  16. RolandOfEld
    Member
    Posted 9 months ago #

    that did it! thanks for for your help and patience :D

  17. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    Glad you got it sorted :-)

  18. ddxv
    Member
    Posted 4 months ago #

    I puzzled over this post a bit, but this is what I got to work. I don't know what I'm doing so if anyone has a cleaner way, please feel free.

    </div> <!-- /.widget-area -->
     </div> <!-- /.col.<?php echo $containerClass?> -->
    	<?php }	} ?>
            <?php }   ?>
    
    	<?php }
    elseif ( !is_front_page() ) { ?>
             <header class="entry-header">
                <?php if ( is_single() ) { ?>
                   <h1 class="entry-title"><?php the_title(); ?></h1>
                <?php }
                else { ?>
                   <h1 class="entry-title">
                      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to %s', 'quark' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
                   </h1>
                <?php } // is_single() ?>
             </header> <!-- /.entry-header -->
             <?php } ?>
    
    		</div> <!-- /.banner.row -->
    	</div> <!-- /#bannercontainer -->

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.