Create a beautiful resume with WordPress and Atomic
Our latest WordPress theme, Atomic, is perfect for a business or portfolio site, but the homepage layout is really versatile and can be used to create all kinds of sites. In this quick tutorial, we’ll show you how to whip together a beautiful resume site to showcase your skill set to potential clients and employers. Check out our resume demo to see what we’ll be building in this tutorial.
When you first activate Atomic, it will be presented as a blog with your latest posts. This is the default function of a WordPress theme, but we’ll want to use the Homepage template to show various pages on the homepage instead of blog posts.
Create a homepage.
Start by going to Pages → Add New and creating a new page to be used as your homepage. In the Page Attributes window, apply the Homepage template to the page. This will allow us to add sections to the homepage in the Customizer after we create some more pages.
Create the resume pages.
Next, let’s create a few pages that you might find on a resume, such as Summary, Education, Experience, Additional Skills and Contact. We’ll use these pages for sections on the homepage. Click here to download our resume demo data, which you can quickly modify to meet your needs.
Create a Contact Page
Atomic uses Jetpack’s Contact Form feature for adding contact forms to your pages.
- Firstly, make sure the Contact Form feature is activated on the Jetpack settings page.
- Go to Pages → Add New to create a new page to use as the contact page.
- To create a contact form, click the contact form icon above the post editor. Visit the Contact Form page for more information on how to create a contact form.
- Publish the page when finished.
Use the Excerpt box in your page editor to add additional contact details below the contact page title as seen below.
Add the resume pages to the homepage.
Now that we’ve got these pages created, let’s add them to the homepage via the Customizer. Go to Appearance → Customize → Theme Options → Front Page. Here, we can select the pages we’ve just created to create our resume.
Let’s jazz it up!
Now that we’ve got our resume pages added to the homepage, let’s style the header to be a little more personable. We’ll add a logo, a header image, and some header text by visiting Appearance → Customize.
In the Site Identity panel, you can upload a logo image, or you can keep the site title and tagline if you’d like. In Header Image, you can add an image to be shown as a background image in your header. Use the Header Image Opacity and Header Background Color to tweak the header to your liking. Finally, visit Theme Options → General Settings to add a title and subtitle to your header area. In my example, I’ve used my name for the title and a brief sentence about me as the subtitle.
Add a call-to-action link to the header.
Instead of adding a traditional full menu, we’ve opted for a minimal, focused menu item that links to the contact form at the bottom of the page. To create a menu button like this, visit Appearance > Menus, create a new menu and assign it as the Primary Menu.
Next, using the Custom Links box, add a new link with using an anchor link to your Contact section, such as #panel5. Each homepage section has an ID such as #panel1, #panel2, etc. If your Contact section is the fifth homepage section, as in our demo, your anchor link would be #panel5. Once you’ve added the URL and link text, click Add to Menu. To add the button style, give the menu item a class of menu-cta, as seen in the screenshot above. If you can’t see the CSS Classes field on your menu item, click Screen Options in the upper right hand corner of the screen to enable it.
If you’ve followed the steps above fairly closely, you should have a sweet resume website ready to send out to potential clients and employers! Check out the resume demo and screenshot below to see what we ended up with.
A resume is just one of the many websites you could build with Atomic! Leave a comment a below and let us know what other kind of sites you could see building with this theme. Learn more about Atomic and visit the full demo by visiting the links below. I hope you enjoyed this tutorial!
Bonus Discount! To help you get your resume, business or portfolio up and running, we’ve created an exclusive discount code
BuildWithAtomic to give an additional 10% off your purchase of Atomic! Apply this discount code at checkout or click here to add Atomic to your cart with the discount applied.