Minimalism – Use As Much Of It As Possible
Sometimes you don’t need a huge website – maybe you just want a nice single-page one that serves as your calling card. I decided to have some fun and make one myself. I built mine by modifying Epik, an excellent 3rd-party theme from Appfinite, and adding a few more elements. I wanted to keep my top menu visible when moving to lower areas on the page. In short, a simple one-pager, with links at the top that will get you to any part of the page easily. Take a look here to see what we’re going to build, and while you’re there, click the links at the top.
Note – you will need some mild developer skills to use my method, so non-coding people may find this frustrating. You will need to view your site’s source code, and do some editing of menus, CSS, and maybe even a bit of PHP. You will also need to understand the basics of installing and using WordPress. Or just hire me do it for you. 🙂
Twenty Homepage Widgets – An Epic Journey
Along with its general awesomeness and versatility, Epik boasts a whole lot of home-page widgets. This makes it a great candidate as a single-pager. As I looked into it, I could see why there aren’t as many single-page themes as you’d expect. Some of the stuff you need to allow scrolling all over one page is very doable, but is quite tricky to automate or make easy for a beginner user – significant programming would be needed. The basic idea is to use widgets to put content at various places on the page, and then set up a menu that will navigate directly to those areas instead of going to a new page.
Assumptions – The Positions
You have Genesis and the Epik child theme installed and working. (That’s an affiliate link) It is very possible to put this together with other WordPress themes, and if enough people show an interest, I’ll probably elaborate on that. It’s not too tough, although there may be other development involved, such as manually adding home page widgets if your theme doesn’t offer them. Some programming is needed for that.
In admin, go to Appearance… Widgets. I would suggest using “Slider” as your first widget area. It doesn’t have to actually be a slider, just any bit you want at the top of the page, like recent posts, a call to action, an intro paragraph, etc. I used the Text widget for all my examples, but use whatever widgets you’d like. The widget areas I used were Slider, Home Feature #6, Home Feature #7, and Home Feature #8. If you haven’t populated any widget areas yet, you will see that your site just shows recent posts on the homepage. Also, as is the case with most modern themes, the home widgets assume that you have your site set to show “Latest Posts” on the homepage, not a static page.
What Would Epicurus Do?
Probably a quick test, unless he were hungry. Take a look at your site, and see how it looks! Now comes the “hard” part. View the source of your page. Find the area surrounding one of your widgets. If you look carefully, you should see some text you entered, or at least some trappings of widget output. If you get stuck in the mass of code, do a find on “section” (you are using the latest version of Epik, right?), and you’ll run into them. You’re looking for the “id” of each widget section. It’s easier if you just take a look, so have a look at my screenshot just below. You’ll see that I’ve circled the classes that match each widget area, and also the ID’s that attach to them. The last one is way down near the bottom, so you might need to scroll for that. I’d suggest writing down the ID for each one, as we’ll be making our special menu with those. My ID’s were “text-2”, “text-3”, “text-4”, and “text-5”.
Now go to Appearance… Menus, and click “create a new menu”. We will not be using Pages! Click “Links” on the left. For the first Link, I entered “#text-2” (remove “http://”). Notice how the link is the same as the first ID above, but with a number sign (pound sign) in front of it. I titled it “Home”, because this is the highest widget on the page, so if I link to it, it takes me to the top. Same idea with the other links, and give them titles that are meaningful to you, like “Photos” or “Our Work”, etc. Save the menu. Don’t assign it as Primary or Secondary, we’re going to put it elsewhere.
Go to Appearance… Widgets. Put the Custom Menu widget into the Header Right widget area. If you already have other menus, be sure to select the one we just made.
You may need to adjust the image dimension settings if you’re using a header image and uploading it through the Appearance… Header interface.
The next step is to prepare the fixed header with CSS. Appearance… Edit, etc. You’ll see “100px” in several places below. This is to accommodate my header image’s height, adjust that for the height of your header and its image. I left no space above or below the image, but you could edit CSS to make that happen if desired.
- The first bit fixes the header at the top and makes sure it’s tall enough. It’s sticky!
- The next one is to make the header background image clickable.
- Then some adjustments for the placement of header menu links. You may want to adjust this to taste.
- Lastly, we push down the slider DIV so it isn’t hidden under the header. If you’re using a different homepage widget at the top, you’ll need to use code matching that widget.
CORRECTION as of 4/07 – as per alert reader Amar, I’ve added responsive code to help the page look better at responsive sizes. A bit of demo-itis on my part, I’m afraid. Thanks, Amar! These are the portions containing “media only” below. It locks the header in place at iPad portrait size. I considered putting in the hipster 3-bar icon that represents a mobile menu, but decided against it. This would be more important to have if we were using dropdowns, but having dropdowns on a 1-pager? Usability Madness, and defeats the purpose of a 1-pager IMO! As always, adjust CSS to taste.
ANOTHER RE-WRITE as of 4/12! – It was bugging me that the mobile scenario was imprecise. I made a bunch of CSS changes to eliminate the need for any offset in the scrolling plugin! (updated instructions below) With that and a few more CSS tweaks, the links at mobile size are much more precise so a more uniform look is retained at all sizes. I even added code to work better when logged in, an issue with any fixed header scenario. I’ve updated the CSS below, and I think you’ll like the demo’s performance better now. Thanks for your patience.
NEW OPTIONAL FEATURE as of 4/16! – All right, Amar, you win again! 😉 I added some jQuery to show the current selected link. I was considering some CSS3 tricks, but didn’t find any, so I just wrote up some jQuery code which you’ll see under the following block of CSS. This is added to a Genesis theme via Genesis… Theme Settings, scroll down and put it into one of the Header or Footer script boxes. Skip this step entirely if you don’t care about the “current link color”. I really don’t, to be honest, but some people like eggs in their beer, and it’s fun to figure those things out.
I also added a 1-liner in the CSS to give it a particular color – you’ll have to have this or your jQuery won’t do anything, and you’ll have to adjust that color for your own site. I decided not to bother having “Home” selected upon arriving at the page, which seems like overkill. If Amar wants to supply that code, I might stick it in there. 😉 btw, he is friendly and always asks politely – I don’t do these extra mods for just anyone. Unless they pay me, of course!
Your new links should work now, quickly bringing you down to the areas lower on the page, but very quickly. Now we’re going to make them smooth and slick with jQuery. Install the Easy Smooth Scroll Links plugin, and activate it. Go to Settings…. ESSL Settings. Here are the settings I used:
NOTE! The Easy Smooth Scroll Links plugin has changed yet again. With version 2, it’s now offering some fancy smooth scroll to other pages stuff. I’m obviously not using that here. It no longer has the “back to top” button in its latest version.
- The Offset is no longer needed with the last update! Instead, the fixed header is dealt with by CSS. So if that field is blank, fine, or 20 will do (its default). Btw, because of these changes, I now believe that other smooth scrolling plugins would also work, or raw jQuery, of course.
- For Scroll Animation Effects I chose EaseOutQuint. There are many others you can try in the dropdown.
To the Toppermost of the Poppermost
Since ESSL no longer has the scroll-to-top button, I found another way to do that easily. I just installed the WPFront Scroll Top plugin! It worked right away, and offers some pretty nice features. The only setting I changed was to play with many icons that you can use for your scroll button, lots of fun! Or you can use text and/or CSS styling if desired.
Voila! I hope you find this useful and fun. If you find this hard to follow, or find any mistakes, let me know in the comments and I’ll try to make it clearer. Thanks!