wordpress page title above main content

Question

I am having problems figuring out how to display my wordpress page title above all the main content, including the sidebar. In other words, straight after the header. It is fine with a full width page but on a page with a left aligned sidebar the page title sits to the right of the sidebar content and over the main content section rather than at the very top of the page, directly above the left-aligned sidebar content. Am using JointsWP theme and having looked into loop-page.php it seems as though the page title is being called above the entry-content:

<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article"     itemscope itemtype="http://schema.org/WebPage">

<header class="article-header">
<h1 class="page-title"><?php the_title(); ?></h1>
</header> <!-- end article header -->

<section class="entry-content" itemprop="articleBody">
    <?php the_content(); ?>
</section> <!-- end article section -->

<footer class="article-footer">
     <?php wp_link_pages(); ?>
</footer> <!-- end article footer -->

<?php comments_template(); ?>

</article>

If I remove the article header section from loop-page.php and insert it directly into page.php after the closing of the get_header(); tag then I get the desired result, but I don't think this is the correct way to handle it. Sorry if this is a really basic question but I have searched online and haven't been able to find an answer.

P.J P.J · Accepted Answer · 2018-10-01T14:48:13

Where each item appears on the page is a product of both your theme and the CSS applied to the page. The code you've pasted above doesn't include the code that is used to generate the sidebar. Usually the sidebar is called by the file 'header.php'. For example, here is the code from the common theme "twenty fifteen" that generates the sidebar (right at the end of the header.php file):

</header><!-- .site-header -->
<?php get_sidebar(); ?> </div><!-- .sidebar -->

You could solve this purely with CSS, but I would recommend adding the title before the header - this will make it a little easier. In the example above, try editing header.php as follows:

</header><!-- .site-header -->

<div id="the_title">
     <h1 class="page-title">
        <?php the_title(); ?>
     </h1>
</div>

<?php get_sidebar(); ?> </div><!-- .sidebar -->

Depending on the formatting you're using, it might be helpful to place the title inside a div that shares the main page content class, as below.

</header><!-- .site-header -->
   <div id="content" class="site-content">
      <div id="the_title">
         <h1 class="page-title"><?php the_title(); ?></h1>
      </div>
   </div>
<?php get_sidebar(); ?> </div><!-- .sidebar -->

Then add CSS formatting to id="the_title" to ensure it displays as you want it to. For the CSS edits, you're probably going to want to add something like the below to your style.css file:

#the_title {
   width:100%;
   margins: 40px;
}

wordpress page title above main content

1 Answers