Creating a static homepage

Creating a static home page is the first step in setting up your ProPhoto site to function as an all-in-one solution for your web presence.

We are often asked how to create a scaled-down home page (without all of the posts) while still giving visitors a way to access blog posts in a separate area (normally via a menu link). To learn how watch the video here and/or read through the written steps below.

Step 1: Create a Page for your blog

Go to Pages > Add New and create a new page with a title of “Blog.” You don’t need to add any content to it (the content of this page will be replaced anyway), so just publish it.

If you have a folder in your WordPress installation titled “blog” then that will cause a link to a page named “blog” to not work. Rename either the folder or the blog page to fix the problem.

Step 2: Create a Page for the ‘home’ content

Go to Pages > Add New again and create another new Page that you want to use for your Front Page and title it “Home” or anything you like. This Page should contain the content you want on your static Front Page. And make sure to uncheck the “Allow comments” box if you don’t want comments enabled on your homepage.

The grid is just an example of content. You can display anything you like – text, images, galleries… or nothing at all.

If you can’t find the Discussion area in your page editor screen, go to the “Screen Options” box in the upper right hand corner of the page editor screen, click it and the check the “Discussion” box, so that area appears.

Mobile-specific home page

If you plan to use the Mobile layout tools that ProPhoto provides to visitors using smartphones, you can even create a special Page just for those visitors. This way, you can create special content which is optimized for an ideal layout on these smaller screens. Simply create a second page to use as your home on mobile phones (maybe titled ‘Mobile Home’ or something?) and you will be able to choose your special page in the “ProPhoto” > “Customize” > “Mobile” > “General” area in ProPhoto. Learn more about enabling mobile site.

Step 3: Setup WordPress for a ‘static’ home Page

Go to “Settings” > “Reading” and in the “Front page displays” area, select “A static page“. For your static page, select the “Home” page you created for your Front Page, and for your posts page, select the “Blog” page that you created. Last, click the “Save Changes” button.

Step 4: Make some Navigation Menu links

Next, go to “ProPhoto ” => “Customize” => “Menus” => select your desired menu, click “add a new menu item” and then the “edit menu item” icon.  

Select “Internal site links” and then select the “Blog” page you created previously.  Provide a name using the “Link Text” box, make any other changes to your link options or display, and click “Save changes” to create a link to your new blog page.

Some designs will require you to create or select a ProPhoto Button for the appearance of your link, so be sure to check this out if your new menu item doesn’t look the same as others in your menu area.

After you’ve created a “Blog” link to take visitors to your blog page, you may also need to create a menu item for your new ‘front’ page – to learn about that, CLICK HERE.

Step 5 (optional): Clean up the home page

Hide the Home page Title area

Your static home page will display the ‘Page Title’ at the top (like any other page).

To hide this title from your Home page, enable the ProPhoto page specific options which you should find appears as a pane right in your Home page WordPress editor screen – see here for what you’re looking for:

enable-page-specific-options-pane

In the pane you see when this feature is enabled, you’ll find several controls which allow you to show/hide certain features on this specific Home page, including the option to disable the post/page title area where your title appears, as seen in the example here:

post-page-title-area-disabled

The “post/page title area” has been unchecked and will be hidden

Uncheck this box to disable the title area for your Home page, and you’ll notice it turns blue to indicate your setting overrides the default behavior of your site. Checked areas are shown, unchecked areas are hidden. When something is highlighted blue, it is specifically overridden for this particular post/page.

Don’t see these options in your ProPhoto 5 software?
Make sure your site is updated

Hide mobile home page title area

To hide this title from your mobile Home page, go to “ProPhoto” > “Customize” > “Advanced” > “Custom Code” > “Custom CSS”
You will need to copy this code and paste it into that box, then click Save Changes at the bottom of the screen:

.mbc-is-front-page .article-header {display: none;} /** hide the Home page Title area for phones **/

This special code will hide the entire Title area (text and spacing) on the home page for phones only.

Hide other areas of the Home page

See the other ProPhoto page specific options found in the area mentioned above, and also review how to manually hide other areas using advanced CSS code:

Step 6 (optional): Load from the main web address

If WordPress was originally set up in a sub-folder on your web server, the ‘front’ page content may be loading from an address like:

http://www.mydomain.com/blog
or
http://www.mydomain.com/wordpress

Overall, a static home page can give your visitors a simple, elegant place to land when visiting the site, while still providing seamless access to your recent work via your blog link.

Step 7 (optional): Setup a mobile phone-specific homepage

By default, your front page will be shown to both desktop and mobile phone visitors. (tablet devices see the desktop layout). But since widget areas are not used for the mobile phone layout, you might need to create a front page that is created specifically for phones.

A mobile-specific front page is not required – it is simply an option, in case your front page for desktop doesn’t work the way you want on the mobile home page layout.



Creating a static home page is the first step in setting up your ProPhoto site to function as an all-in-one solution for your web presence.

We are often asked how to create a scaled-down home page (without all of the posts) while still giving visitors a way to access blog posts in a separate area (normally via a menu link). To learn how watch the video here and/or read through the written steps below.

Step 1: Create a Page for your blog

Go to Pages > Add New and create a new page with a title of “Blog.” You don’t need to add any content to it (the content of this page will be replaced anyway), so just publish it.

If you have a folder in your WordPress installation titled “blog” then that will cause a link to a page named “blog” to not work. Rename either the folder or the blog page to fix the problem.

Step 2: Create a Page for the ‘home’ content

Go to Pages > Add New again and create another new Page that you want to use for your Front Page and title it “Home” or anything you like. This Page should contain the content you want on your static Front Page. And make sure to uncheck the “Allow comments” box if you don’t want comments enabled on your homepage.

The grid is just an example of content. You can display anything you like – text, images, galleries… or nothing at all.

If you can’t find the Discussion area in your page editor screen, go to the “Screen Options” box in the upper right hand corner of the page editor screen, click it and the check the “Discussion” box, so that area appears.

Step 3: Setup WordPress for a ‘static’ home Page

Go to “Settings” > “Reading” and in the “Front page displays” area, select “A static page“. For your static page, select the “Home” page you created for your Front Page, and for your posts page, select the “Blog” page that you created. Last, click the “Save Changes” button.

Step 4: Make some Navigation Menu links

Next, go to “ProPhoto ” => “Customize” => “Menus” => select your desired menu, click “add a new menu item” and then the “edit menu item” icon.  

Select “Internal blog links” and then select the “Blog” page you created previously.  Name your “Link Text” make any other changes to your link options or display and click “Save changes.”

Step 5 (optional): Clean up the home page

Hide the Home page Title area

Your static home page will display the ‘Page Title’ at the top (like any other page).

To hide this title from your Home page, go to “ProPhoto” > “Customize” > “Advanced” > “Custom Code” > “Custom CSS”
You will need to copy this code and paste it into that box, then click Save Changes at the bottom of the screen:

body.is-front-page .article-header {display: none;} /** hide the Home page Title area **/

This special code will hide the entire Title area (text and spacing) on the home page.

Hide other areas of the Home page

Step 6 (optional): Load from the main web address

If WordPress was originally set up in a sub-folder on your web server, the ‘front’ page content may be loading from an address like:

http://www.mydomain.com/blog
or
http://www.mydomain.com/wordpress

Overall, a static home page can give your visitors a simple, elegant place to land when visiting the site, while still providing seamless access to your recent work via your blog link.


 

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us