WP SITES

Log in

Custom Front Page For The Minimum Pro Theme

—

by

Brad Dalton

I’ve just finished coding a custom home page template for the Minimum Pro theme by StudioPress.

Here’s what it looks like:

minimu pro custom home page

Rather then send emails back & forth to my client, i thought i’d share all the code with the people who subscribe to my blog.

Here’s all the PHP code for the front-page.php template:

Note: Please copy from the view raw link and paste using a code editor like Notepad++.

And here’s the code for your child themes functions.php file:

On top of this i have also added the conditional tag to the existing code for the sites tagline. You can simply add the conditional below the function. Here’s what the full code snippet should look like:

And now for the CSS code which you should add at the end of our child themes style.css file before the media queries.

Mobile Responsive Design

Here’s the CSS for media queries which should be added at the absolute end of your child themes style.css file:

You can tweak this CSS if you want your home page to look different on different sized screens.

Pro Tips

The sidebar for this template uses the default primary sidebar so you may want to display different widgets on the home page to whats shown elsewhere. Simply install the Widget Logic plugin or one of the other plugins which do the same thing and add conditional tags to each sidebar widget.

Remove the 2 lines of PHP code for adding new image sizes from your functions file (after generating your images) if you only want the same image to display on the home page.

You can easily remove the code for Backstretch however there’s no real need as it doesn’t fire unless you’ve added a background image via the built in Background function.

Conclusion

As you can see, i only added 2 lines of CSS code. One to hide the primary nav menu and another to add some margin for the banner which you may not need if you don’t want to add a banner.

I did modify the media queries as there’s only 2 home featured widgets now so there’s less CSS code.

There’s actually less PHP code for this custom front page template than is used in the original template.

Please let me know what you think and i always love any type of real feedback.

Using Another Theme?

Comments

32 responses to “Custom Front Page For The Minimum Pro Theme”

  1. James Avatar
    James

    I’m working on a similar minimum pro home page. Unlike the example above the most recent post is displayed at the top of the gridloop and takes up the full 2 columns . (the red boxes in your example)

    https://www.dropbox.com/s/zsrd1vagnj6qern/featured%20post.png?dl=0

    Currently this top featured post aligns to the left but I’d like to get the title, image and text to be centered and limited to a 1 column width.

    I think this part of the front page is styled by home-feature class which currently contains:

    .home-featured {

    border-bottom: 5px solid #f5f5f5;

    margin-bottom: 60px;

    padding: 40px 0;

    }

    But any changes I make to it aren’t making being displayed

    Did I miss something??

    1. Brad Dalton Avatar
      Brad Dalton

      James

      Could you link to the URL in question here or using this secure form for members. http://wpsites.net/wordpress-support/

      1. James Avatar
        James

        I’m logged in and paid via PP but the link you sent me send me to the registration and payment page

        1. Brad Dalton Avatar
          Brad Dalton

          Please clear your browser cache as i have tested it and it displays the form to logged in subscribers

          Or use the contact form.

          Thanks

    2. Brad Dalton Avatar
      Brad Dalton

      This relates to CSS generated by a plugin therefore is not covered under membership which covers all my code.

      However, you could make the container width 50%.

      [code]
      #powerpress_player_8523 .entry-content {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      }
      [/code]

      I think you must have a caching plugin which minifies CSS active because any changes i make in the browser don’t work?

      Or wrap all the elements in a class and make it 50% width.

      You wouldn’t just center the image as the title and other elements need to be centred as well.

      Another option is to install the Featured Podcast Widget.

      I could create a widget which is centered and support that.

  2. Petri Avatar
    Petri

    Hi Brad,

    Thanks for this interesting post.
    I’m wondering, if I want to use 1 featured text widget (instead of the 4 in Minimum Pro), is it sufficient to add this code to my css file:
    [code]
    .home-featured-1 {
    float: left;
    text-align: left;
    width: 100%;
    }
    [/code]
    Or do I have to change the functions.php also?

    Thanks in advance!

    1. Brad Dalton Avatar
      Brad Dalton

      I don’t think you’ll need to float the widget left as its 100% width or align the text left. Really, you wouldn’t need any CSS.

  3. Chad Ritchie Avatar
    Chad Ritchie

    Brad,
    In Minimum Pro, is it possible to remove the entry content section from the Home Page only?
    The home page would only show logo, nav, a Soliloquy slider, four home featured widgets and footer—no content area.

    This section would not display on the home page:

    I’ve tried several “home-grown” functions but no luck. 😉

    1. Chad Ritchie Avatar
      Chad Ritchie

      Brad,
      The code I posted did not display. Here is a screenshot of what I am trying to remove from the home page.
      http://d.pr/i/sb23

      1. Brad Dalton Avatar
        Brad Dalton

        Here’s the correct function to remove the entry content from any Genesis child theme.
        [code]
        remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’ );
        [/code]

        You can use the PHP code in a template file like home or front page file or in a custom function as previously stated.

    2. Brad Dalton Avatar
      Brad Dalton

      At least 3 ways to do that.

      1. Use CSS code with the class for the home page
      2. Add a remove function to the home.php file
      3. Conditionally remove the content using a custom function from your child themes functions file.
  4. aditya Avatar
    aditya

    I followed up the instructions but something went wrong in terms of responsive design. Posts are not being ordered into right way !
    Have a look at this : http://i.imgur.com/zUigSlS.png

    1. Brad Dalton Avatar
      Brad Dalton

      Yes you can easily change the width to 100% for each new class added to the template at different screen sizes in the CSS to suit your own personal preferences.

      Its a 2 minute job.

      .home-featured,
      .full-width,
      .home-featured-1,
      .home-featured-2 {
      width: 100%;
      }

      Plus don’t forget the grid loop.

      1. aditya Avatar
        aditya

        yep, It worked. Thanks

        1. Brad Dalton Avatar
          Brad Dalton

          Glad you got it sorted Aditya as its not the hard to change the values for existing media queries and add more classes as well.

  5. Zimbrul Avatar
    Zimbrul

    I’m looking to implement this design on a website. What is the blue 700×350 area and what is the text on its right hand side?

    1. Brad Dalton Avatar
      Brad Dalton

      Its the Genesis featured posts widget with a large image and excerpt.

  6. Amit Kolambikar Avatar
    Amit Kolambikar

    What if i want to add 150×150 featured image to the posts on homepage and 740px x 220px on category pages ?

    1. Brad Dalton Avatar
      Brad Dalton

      What happens if you add a 150px value like this to the code for the grid in your front-page.php file: ‘feature_image_size’ => 150,

  7. Zimbrul Avatar
    Zimbrul

    That’s a more economical and a better oraganisation of the front page in Minimum Pro. Thanks for the tutorial.

  8. Joseph Avatar
    Joseph

    May your giving hand never fail (old Irish proverb)

    Muchas gratias

    1. Brad Dalton Avatar
      Brad Dalton

      hahaha. Thanks Joseph for the kind words.

  9. Keith Davis Avatar
    Keith Davis

    That is very generous of you Brad.
    A complete mini course in customising Genesis – complete with CSS.

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks Keith.

      Will you be updating to the Minimum Pro theme or continue with your existing theme?

      Is there any feedback on the background image?

      1. Keith Davis Avatar
        Keith Davis

        Hi Brad
        No news on the background image “problem” in Min Pro.
        Not sure what’s happening.

        Think I’ll stay with the old Min 2 theme for a while – busy working on a new site.
        Studiopress have allowed me to use the domain genesisthemes.co.uk so I’m putting the site together slowly http://ow.ly/i/3aV9e

        1. Brad Dalton Avatar
          Brad Dalton

          Looks good!

          1. Keith Davis Avatar
            Keith Davis

            Thanks Brad
            Straightforward Sixteen Nine theme but I like the theme and it’s completely different to Minimum.

            This site will be the first Blog style site I’ve ever had.

          2. Brad Dalton Avatar
            Brad Dalton

            Looks great Keith. Will you be developing child themes?

          3. Keith Davis Avatar
            Keith Davis

            No this will be purely an affiliate site for Studiopress themes and Cobalt apps plugins and other Genesis related software.

            Hoping to move it forward this weekend.

          4. Brad Dalton Avatar
            Brad Dalton

            Fair enough. Good luck, hope its a big success for you.

  10. Dave Avatar
    Dave

    Love it. Thanks Brad.

    What does this printf( mean?

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks Dave.

      Sorry, missed your question.

      The printf() function outputs a formatted string and is more efficient than using echo for use with HTML 5.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.