• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Custom Front Page For The Minimum Pro Theme

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?

  • Create Custom Page Template Like Home For The Agency Theme

Reader Interactions

Comments

  1. James says

    December 17, 2014 at 4:07 am

    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??

    Log in to Reply
    • Brad Dalton says

      December 17, 2014 at 4:13 am

      James

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

      Log in to Reply
      • James says

        December 17, 2014 at 4:16 am

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

        Log in to Reply
        • Brad Dalton says

          December 17, 2014 at 4:19 am

          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

          Log in to Reply
    • Brad Dalton says

      December 17, 2014 at 4:52 am

      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%.

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

      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.

      Log in to Reply
  2. Petri says

    January 16, 2014 at 2:46 pm

    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:

    .home-featured-1 {
    	float: left;
    	text-align: left;
    	width: 100%;
    }

    Or do I have to change the functions.php also?

    Thanks in advance!

    Log in to Reply
    • Brad Dalton says

      January 17, 2014 at 12:28 am

      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.

      Log in to Reply
  3. Chad Ritchie says

    October 31, 2013 at 4:27 pm

    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. 😉

    Log in to Reply
    • Chad Ritchie says

      October 31, 2013 at 4:31 pm

      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

      Log in to Reply
      • Brad Dalton says

        October 31, 2013 at 6:02 pm

        Here’s the correct function to remove the entry content from any Genesis child theme.

        remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

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

        Log in to Reply
    • Brad Dalton says

      October 31, 2013 at 5:57 pm

      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.
      Log in to Reply
  4. aditya says

    October 11, 2013 at 12:13 pm

    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

    Log in to Reply
    • Brad Dalton says

      October 11, 2013 at 12:34 pm

      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.

      Log in to Reply
      • aditya says

        October 11, 2013 at 3:39 pm

        yep, It worked. Thanks

        Log in to Reply
        • Brad Dalton says

          October 11, 2013 at 3:44 pm

          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.

          Log in to Reply
  5. Zimbrul says

    October 10, 2013 at 10:45 am

    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?

    Log in to Reply
    • Brad Dalton says

      October 10, 2013 at 10:48 am

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

      Log in to Reply
  6. Amit Kolambikar says

    September 29, 2013 at 4:26 pm

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

    Log in to Reply
    • Brad Dalton says

      September 29, 2013 at 8:23 pm

      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,

      Log in to Reply
  7. Zimbrul says

    September 18, 2013 at 9:02 am

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

    Log in to Reply
  8. Joseph says

    September 17, 2013 at 5:18 pm

    May your giving hand never fail (old Irish proverb)

    Muchas gratias

    Log in to Reply
    • Brad Dalton says

      September 17, 2013 at 5:27 pm

      hahaha. Thanks Joseph for the kind words.

      Log in to Reply
  9. Keith Davis says

    September 17, 2013 at 4:48 pm

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

    Log in to Reply
    • Brad Dalton says

      September 17, 2013 at 4:54 pm

      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?

      Log in to Reply
      • Keith Davis says

        September 17, 2013 at 5:28 pm

        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

        Log in to Reply
        • Brad Dalton says

          September 17, 2013 at 6:01 pm

          Looks good!

          Log in to Reply
          • Keith Davis says

            September 17, 2013 at 6:08 pm

            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.

          • Brad Dalton says

            September 17, 2013 at 6:18 pm

            Looks great Keith. Will you be developing child themes?

          • Keith Davis says

            September 17, 2013 at 6:29 pm

            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.

          • Brad Dalton says

            September 17, 2013 at 6:56 pm

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

  10. Dave says

    September 17, 2013 at 12:52 pm

    Love it. Thanks Brad.

    What does this printf( mean?

    Log in to Reply
    • Brad Dalton says

      September 17, 2013 at 12:53 pm

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.