How To Optimize WordPress Website Template For SEO

When you use WordPress to create a website, you should want to make your website rank higher in google search result. To achieve this goal, you need to make search engine optimization (SEO) on your website correctly.  This article will tell you some tips about how to make the correct configuration in your website to improve your website page rank. But the number one factor of SEO is your website content. Good content can drive good traffic to you.

1. Use Only One Html H1 Tag In Web Page.

h1 tag wrapped content is very important to google search engine, the google spider will treat html h1 tag content as important as the html title tag content. So for a regular web page, you had better has only one h1 tag in your web page. If you find there are more h1 tag in one web page, you had better change the WordPress template to change it to use only one h1 tag.

If you use WordPress to build the website, h1 tag commonly exist in the article index page and content page.

1.1 Find Web Page h1 Tag Count.

Follow below steps to find out how many h1 tag exist in your web page use google chrome.

  1. Browse a webpage in google chrome web browser.
  2. Right click the web page, then click View Page Source menu item in the popup menu list.
  3. It will open a new tab window to display the webpage html source code.
  4. Then click the Customize and control Google Chrome button at chrome browser top right corner, then click Find… menu item to open search text box.
  5. Input h1 in the search box then you can find the h1 tag count in the source code.

1.2 Change h1 Tag In WordPress Template.

This article will edit WordPress Stargazer template as an example.

  1. Login to WordPress admin console.
  2. Then click Appearance —> Editor menu item in left panel.
    wordpress appearance menu item
  3. Then it will display Edit Themes page in right panel.
  4. Select the Stargazer theme in theme drop down list ( at top right ) to edit.
    select wordpress stargazer theme template
  5. WordPress article index and content web page template is saved in content —> content.php (content-page.php) file in Theme Files php file list. Click content.php (content-page.php) file and edit it’s source code in the center frame.
    change wordpress index page article title size
  6. There are two parts in content.php, the top part is used to generate WordPress article index page, the bottom part is used to generate article content page.
  7. To change the article index page h1 tag, change below code in red.
    <?php if ( is_singular( get_post_type() ) ) : // If viewing a single post. ?>
    <header class="entry-header">
        <h1 <?php hybrid_attr( 'entry-title' ); ?>><?php single_post_title(); ?></h1>
    </header><!-- .entry-header -->
    <?php else : // If not viewing a single post. ?>
  8. To change the article content page h1 tag, change below code in red.
    <?php else : // If not viewing a single post. ?>
    <?php get_the_image( array( 'size' => 'stargazer-full', 'order' => array( 'featured', 'attachment' ) ) ); ?>
    <header class="entry-header">
    <?php the_title( '<h1 ' . hybrid_get_attr( 'entry-title' ) . '><a href="' . get_permalink() . '" rel="bookmark" itemprop="url">', '</a></h1>' ); ?>
    </header><!-- .entry-header -->
    <?php endif; // End single post check. ?>
  9. Finally do not forget click the Update File button to save all the changes.

2. Custom WordPress Template CSS Style.

2.1 Change Html Pre Style.

If your webpage contains programming ( java ) source code and you want to emphases display the source code, you need to contain the source code text in html pre tag. Generally if the source code line is too long, it will display horizontal scroll bar in the pre tag automatically.

html pre tag show horizontal scroll bar

If you do not need the horizontal bar and want the source code line wrap automatically to display the complete source code line, you can change html pre tag css style with below actions.

  1. Login to WordPress admin console.
  2. Click Appearance —> Customize menu item in left, then it will show below menu list.
    wordpress appearance customize theme template menu list
  3. Click the Additional CSS menu item, and input below css style code in the input box. Please note the red code, those code control whether pre tag break the text line or not.
    pre,.form-allowed-tags code {
    display: block;
    font-family: monospace;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    /* word-break: break-all;*/
    word-wrap: break-word;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
  4. Then click Publish button at top right to make the change take effect.
  5. Now you can find html pre tag will show the java source code completely by break the text line without horizontal scroll bar.
    wordpress make html pre tag wrap word line

2.2 Change Stargazer Top Navigation Menu Size.

By default, the top navigation menu width in Stargazer template is fixed to the article content width. If your website has a lot of menu item, the menu items will be displayed in multiple line.

wordpress stargazer navigation menu before extends

To make the navigation menu width wider. You can add additional css style by customize the Stargazer template css code.

  1. Login to WordPress admin console.
  2. Click Appearance —> Customize menu item in left.
  3. Click the Additional CSS menu item, and input below css style code in the input box. Please note the red line.
    .custom-background #container > .wrap {
    max-width: 1975px;
    margin-top: 25px;
    margin-bottom: 25px;
    #menu-primary > .wrap,
    #footer > .wrap {
    max-width: 1975px;
    padding-left: 25px;
    padding-right: 25px;

wordpress stargazer navigation menu after extends

0 0 votes
Article Rating
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x