Support » Themes and Templates » Make a frontpage with your own code

  • Hello one and all.

    I have a fairly new installation of WordPress up on my server. I have made a new folder in my themes folder and it is a child theme of the twentyeleven theme. In here i have the new css file which references the mother theme, with some small tweaks made to the mother theme.

    Here is the link to my site.

    Now, what is leading to much confusion for me, and is making me run round in circles chasing my tail like a possessed mad dog, is this..

    I would like to be able to make the landing/home page, or lets say the content between the header and footer on the landing page, as a normal website, in this sense i mean i would like to deploy a two column layout below the header with a full width column above this, you will see what i`m trying to achieve by a brief visit to my sites homepage.

    Now, i have put this markup, the three divs/containers you can see on the homepage within the “page” i created when i first adjusted the reading settings to front page displays – Home (which i created in the usual fashion of adding the page in add pages..)And then setting the Blog page to Blog, also created in this fashion, which is fine as i would like blog functionality.

    Now i am aware that when i adjust the reading settings this way that the front page will use the page.php template file to display the homepage, i am happy with all this so far.

    What i am wondering is if this is usual practice to hard-code within a page that has been added through add pages or wether it is better practice to create a fresh php template page and call it “home.php” or “front-page.php” So that when you want to make any changes to page.php, should you ever need to, it wont affect the layout or conflict with any other parts within wordpress that rely on page.php, and if so, what loop/wordpress functionality would/should be included in the file. Because i noticed that when i use firebug to go through the code in browser, within the page template currently being used, there is the #content role=”main” container there is a reference to a article/post:
    <article id=”post-5″ class=”post-5 page type-page status-publish hentry”>
    And also entry-content, entry-header divs, this is going to interfere with things going forward right? As its using the page.php within my code.

    In essence what i am trying to achieve here is to be able to have a working reliable template i can work from each time i make a new install so i can start working straight away without having to start from scratch. One which has a traditional look and feel to the homepage, as opposed to the blog look, but one where i can have use WordPress functionality such as pull in latest post feeds to the homepage into a container of my making.

    I hope this makes some sense, i know i`m not the first person that wants to or has achieved this as i look at all the great and unique looking WP builds online today.

    Many kind regards


Viewing 3 replies - 1 through 3 (of 3 total)
  • Duplicate page.php to template-home.php. At the top of the file, add this:

     * Template Name: Custom Homepage

    Now edit the page that you are using for the home page, select the Custom Homepage template from the Page attributes box

    Thanks for the reply blogjunkie.

    I have now done it the way you suggested. And it`s still working.

    But previous to that i had already created then added a front-page.php file and just dropped it in the child theme folder via ftp, and it automatically used this instead of the page.php.

    I used the code inside the page.php file minus any reference to the loop to do this, so in the case of the twentyeleven child theme i kept the header and footer, and the <div id=”primary”> & the <div id=”content” role=”main”> containers that are coded into that theme to hold the homepage content,is this the best way to go about this?
    This is also how i have done it the new way you suggested.

    I guess i`m just asking if i should keep the original theme page layout structure as intact as possible, with regards to the main content containers.

    Also each time i want to create any custom page do i need to do this again and select it this way, for example if i wanted to write my own theme template for the portfolio page i`d hard-code all the html and other code in a file named template-portfolio.php or some other name, and reference it from the dropdown menu again, in the Portfolio page i created in add pages?

    Thanks again for the quick and succinct reply


    Keeping the <div id=”primary”> & the <div id=”content” role=”main”> will give the content within the same styling, so you don’t need to write your own CSS rules.

    Yes, you should use this method for any different page templates (layouts) that you require. However try to be strategic about it – make your template as general as possible so that you can re-use it for multiple pages.

    Good luck, and if you need professional help please look up my company – [signature moderated –]

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Make a frontpage with your own code’ is closed to new replies.