How to Change the Default Homepage in WordPress

104 2

    Changing The Header

    • 1). Modify the default header by logging into the administrative end of your WordPress installation and clicking on the Appearance, then Custom Header link, located on the left side navigation.

    • 2). Modify the blog title font color used by clicking on the font color button located under the header and select a different color. Note that the tag line below the title does not change but instead remains white.

    • 3). Experiment with the upper and lower color buttons located under the header to exploit the gradient feature. Note the Revert button, which allows you to return to the default settings of the header.

    • 4). Test the advanced button where you have the ability to enter in specific hexadecimal color values for each header characteristic mentioned. Click the Update Header button when you are satisfied with your changes.

    Replacing the Background Image of the Header

    • 1). To replace the background image of the header, download the default background image (Kubrickheader.jpg) from the images folder (Yoursiteroot\wp-content\themes\default\images) to your desktop.

    • 2). Open the Kubrickheader.jpg image in your favorite graphic software and experiment by laying additional layers over the blue background to create something unique. When satisfied with the new image, save it as Newheader.jpg and upload the image back into the images folder as described in Step 1.

    • 3). Return to the administrative page and click on the Appearance, then Editor link, located on the left side navigation. Locate and open Style.css file from the list of pages on the right side of your browser window.

    • 4). Locate the header style "#header" and change only the image path from (Images/Kubrickheader.jpg) to (Images/Newheader.jpg), so it points to your new image. Reload your homepage to see your new background image.

    Changing the Footer

    • 1). Navigate to the Appearance, then Editor link, and open the footer.php page located on the right side of your web browser.

    • 2). Locate the following text:
      - - - - -
      <?php bloginfo('name'); ?> is proudly powered by
      <a href="/links/?u=http://wordpress.org/">WordPress</a>

    • 3). Edit the text to suit your needs. Typically users like to include a copyright symbol and the date, and remove the "Powered by WordPress link." To do this you need to change the text mentioned in Step 2 to the following and click update file.
      - - - - -
      <?php bloginfo("name"); ?>Copyright © 2010

    Changing the Navigation Position

    • 1). Navigate to the Appearance, then Editor link, and open the Style.css page located on the right side of your web browser. Locate the following:
      - - - - -
      .narrowcolumn {
      float: left;
      padding: 0 0 20px 45px;
      margin: 0px 0 0;
      width: 450px;
      }

    • 2). Replace the narrowcolumn style in Step 1 with the code below. Note that we are only changing the float and padding settings to the opposite of the default settings.
      - - - - -
      .narrowcolumn {
      float: right;
      padding: 0 45px 20px 0px;
      margin: 0px 0 0;
      width: 450px;
      }

    • 3). Also in the Style.css file find the following:
      - - - - -
      #sidebar
      {
      padding: 20px 0 10px 0;
      margin-left: 545px;
      width: 190px;
      }

    • 4). Replace the sidebar style in Step 3 with the code below. Note that we are only changing the margin-left setting which is basically bringing the sidebar containing the navigation left.
      - - - - -
      #sidebar
      {
      padding: 20px 0 10px 0;
      margin-left: 20px;
      width: 190px;
      }

    • 5). Click the Update File button and check your work by reloading the front end of your website.

Source...
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.