If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

OpenCart 2.x. How to add a new content page and link it to a menu tab or a banner

This tutorial will show how to add a new content page and link for it to a menu tab or a banner in OpenCart 2.x.

OpenCart 2.x. How to add a new content page and link it to a menu tab or a banner

  1. Log into your OpenCart administration panel (yoursite.com/admin).

  2. Navigate to Catalog -> Information:

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner1

  3. Click the Add new button to add a new content page:

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner2

  4. Type in the name of your page and insert the page text to the Description field. You can use the visual editor to format your text. Insert images and create hyperlinks. You can also edit HTML code. Just click on the Source button:

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner3

  5. Select the Data tab. Here you can define page keywords, set Sort Order, the bottom footer display and enable or disable the page:

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner4

  6. Save the changes and check your store online. Content pages are being displayed in the Information block:

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner5

  7. We need to edit the code of the header.tpl file in order to add our content page to the top menu. The file is located in the /catalog/view/theme/themeXXX/template/common folder.

  8. Edit the file using any PHP/code editor. Search for the menu code. It should look as follows:

    			<nav id="top-links" class="nav toggle-wrap">
    			<a class="toggle material-design-person325" href='#'></a>
    			<ul class="toggle_cont">
    			<li> <a class="checkout-button" href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"> <i class="material-design-check51"></i> <span><?php echo $text_checkout; ?> </span> </a> </li>
    			<li class="toggle-wrap">
    			<a href="<?php echo $account; ?>" class="toggle account-button"><i class="material-design-person325"></i> <span><?php echo $text_account; ?></span></a>
    			<ul class="toggle_cont">
    			<?php if ($logged) { ?>
    			<li><a class="account-button" href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
    			<li><a class="order-button" href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
    			<li><a class="transaction-button" href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
    			<li><a class="download-button" href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
    			<?php } else { ?>
    			<li><a class="register-button" href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
    			<?php } ?>
    			</ul>
    			</li> 
    			<li><a class="wishlist-button" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fl-justicons-heart279"></i> <span><?php echo $text_wishlist; ?></span></a> </li>
    			<li><?php if ($logged) { ?>
    			<a class="login-button" href="<?php echo $logout; ?>"><i class="fa fa-sign-in"></i> <span><?php echo $text_logout; ?></span></a>
    			<?php } else { ?>
    			<a class="login-button" href="<?php echo $login; ?>"><i class="fa fa-sign-out"></i> <span><?php echo $text_login; ?></span></a>
    			<?php } ?></li>
    			</ul>
    			</nav>
    		
  9. Each line of code displays one menu element. Copy the line of code:

    			<li><a class="wishlist-button" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fl-justicons-heart279"></i> <span><?php echo $text_wishlist; ?></span></a> </li>
    		

    Add a new line and paste the code you have copied.

  10. Now we need to replace

    <?php echo $wishlist; ?>" id="wishlist-total

    with the URL to our content page to link it to the top menu. Click on the page link in the Information block and copy the URL from the address bar of your web browser:

  11. Replace

    <?php echo $text_wishlist; ?>

    with the page title. In our case it is Test.

  12. Here is the complete line with the changes we have applied:

    <li><a class="wishlist-button" href="http://templatetesting.com/harry/opencart/index.php?route=information/information&information_id=11"><i class="fl-justicons-heart279"></i> <span>Test</span></a> </li>
  13. Save the file. The page has been added to the header menu.

In order to link the new page to a banner, please do the following:

  1. Log into your OpenCart admin panel, navigate to Design > Banners page.

  2. Open any banner required and in banner description field replace

    index.php?route=product/product&path=33&product_id=28

    with the URL to our content page, which can be copied from the address bar of your web browser:

    http://templatetesting.com/harry/opencart/index.php?route=information/information&information_id=11

    OpenCart 2.x. How_to_add_a_new_content_page_and_link_for_it_to_menu_or_link_it_to_a_banner6

  3. After you’re done, save the changes and check banners, they are linked to your new content page.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to add a new content page and link it to a menu tab or a banner