How To Make a Single-Page Website Using the Epik Genesis Theme for WordPress

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.

Some tasty links. I've been asked to make dropdown menus with more chaotic sausage than you see here!
Some tasty links. I’ve been asked to make dropdown menus with more chaotic sausage than you see here!

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.

A glistening Epic. Say, how is that overly popular word spelled, anyway?
A glistening Epic. Say, how is that ubiquitous word spelled, anyway?

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

EpikSource
Click to see illustration of ID tags you’ll need to find in your source code.

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.

  1. The first bit fixes the header at the top and makes sure it’s tall enough. It’s sticky!
  2. The next one is to make the header background image clickable.
  3. Then some adjustments for the placement of header menu links. You may want to adjust this to taste.
  4. 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.

  1. 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.
  2. 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!

This Fine Athlete jumps naturally from place to place.
This Fine Athlete jumps naturally from place to place.

My compliments to Sridhar, whose parallax theme inspired parts of this article. Thanks also to Tony at Alphablossom, whose article motivated me with some ideas about tightening this up!

8 Comments


  1. Hi David! I followed your tutorial to make Epik a single page webpage. Everything works fine and it is beautiful if you visit the page via a computer but the problem is mobile devices. Firstly the slider is hidden under the fixed header and also the ESSL offset is different between mobile device and computer. Do you have any fix for this?

    SIncerely

    Reply

    1. Amar,
      Thanks for your helpful observation! I’ve changed the CSS code to accommodate responsive sizes more, so please look above and try the new code I added, and you’ll see the explanatory note, too.

      Cheers, Dave

      Reply

  2. Hi I added the exact same thing before reading your update. Seem that we had the same fix =). Another thing that bothers me is when I set the offset value ESSL to 142 it is perfect for Desktop view although I need to change it to 20 (default) in order for it to look good on mobile devices, do you have any fix for this?

    Reply

    1. I need to change it to 20 (default) in order for it to look good on mobile devices, do you have any fix for this?

      Amar,
      No, I don’t have a fix for that. One could write jQuery to override what the plugin is doing maybe, but that would add even more complexity to what is already a sensitive scenario. I’m willing to give suggestions, but I won’t promise an iron-clad pixel-perfect look – even if I tried, no 2 people would agree on its rightness anyway. 😉 So if you want to take it further, it will be up to you, I’m afraid, just as I stated from the start.

      In fact, if someone were to get very complex and use many more menu items with widgets, it’s likely that they would outstrip the Easy Smooth Scroll plugin’s capabilities, so it may be best to leave it out, and let people scroll or swipe a bit to get back to the top, which isn’t too bad nowadays.

      I did add even more responsive code and changed my recommended offset. The idea is to keep the header a bit shorter. Check it out if you’d like.

      Good luck,
      Dave

      Reply

  3. Haha once again I visited your site to comment about a solution to the hovering problem. Turns out that you were one day ahead of me again with the same solution hahahahh. Good job!

    Reply

    1. Amar,
      I knew you’d see it my way. 😉

      Reply

  4. Hello Dave,
    I really like your blog. I’m a long-time WP user and have used a number of themes. I discovered Epik today and am about to take the plunge. I’ve never used the Genesis framework though. Have you been satisfied with Epik + Genesis? I noticed Epik was released in early 2013 and updated at least once this year. Is it WP4.0 compatible? What about high resolution/retina? Any words of warning before I plunk down my hard-earned moola?

    Many thanks, and look forward to following your musings on WP and web design. Great stuff

    Glenn

    Reply

  5. Hi Glenn,
    Thanks very much for your interest and supportive comments!

    Yes, I still like Epik, and have it running on my homepage and two of my blogs. As to the retina support, I would say not necessarily. There is a little pinch of code for that in the Genesis Sample theme, but is only for the logo image, and will not do anything without some geek set-up for that. I’m not positive, as I don’t use all the Genesis themes, but I think that most of them don’t support retina stuff too much.

    Getting set up for that takes some work. You have to have 2 (or more) versions of each image that you’re doing that to, and code to address them. Theme developers can’t prep for all of that, because they can’t know what images you’re going to upload, so they can’t automagically create the other versions and write the CSS for them. There are some scripts that help automate some of that stuff, but they are separate from Genesis. I may actually write an article on that once I get more immersed in it. Thanks for the idea!

    Genesis also doesn’t have the monster theme options panel that many people look for – it’s fairly basic in that way. You could head over to appfinite.com and contact them directly for more Epik theme info.

    btw, my Epik 1-pager scenario above might need updating.. the plugin I recommend above for the scrolling no longer supports the “back to top” button. In fact, back to top buttons are on the way out these days, so I’m dragging my feet on that. If you use a previous version of the plugin (findable on the Developer tab of the plugin) it will still have the back to top bit.

    Attitude is a nice free theme that is purportedly retina-ready, the extent to which I’m not certain.

    Cheers, Dave

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *