Pena is a modern theme offering a variety of customization options and page templates, and is designed with nonprofit and charity sites in mind.
This theme has been inspired by the beautiful “Living on One Dollar” documentary.
Pena is responsive and displays your site in the best possible way on smartphones, tablets, and laptops, as well as large desktop screens.
Front Page: Build Your Own
We styled the front page in Pena with a great attention to detail. Everything is made to present your site at its best — from the layout options, to styling and typography.
Pena makes use of Featured Content to display your most important posts at the bottom of the front page, above the footer.
Flexible Blog Layout
In the Customizer, choose between three different blog layouts. You can change the position of the sidebar or choose a list display. Your custom layout also applies to archives, like category or date listings.
Pena offers several page templates:
Pena supports many popular social media icons in its social menu.
More Customization Options
Pena allows you to customize your site title, site logo, custom header, and background.
For additional options like Custom CSS, Custom Fonts, and Custom Colors outside of the free palettes that come with the theme, you will need the Premium or Business Plan.
Pena comes with four widget areas: one sidebar and three footer widget areas.
Quick Specs (all measurements in pixels):
- Custom logo is
86 wide by
- The sidebar width is
- Content width with no sidebar
- Content width with a sidebar is
Setting Up Your Front Page
By default, the front page displays your latest posts. If you don’t want to use blog posts for your homepage, you can set up a static front page following this step-by-step guide. Once you’ve created your static front page, you can begin setting up your site!
If you choose a static front page, you can configure several panels to be displayed. The first panel holds your page content.
- To add an image as a background to the page content, set a Featured Image on your static front page.
- Add some text content to the page, if desired.
If you want to add a blue button like the one on the demo, you can use this code in the HTML editor:
<a class="button" href="http://your-link-goes-here.com/">Read More</a>
First and Second Content Blocks
These blocks of content consist of two pages, selected under Customize → Theme Options → Front Page. To set up your site like the demo:
- Add a new page, and give it some content.
- Set an optional Featured Image, which will be used as the content’s background.
- Publish your page, and navigate to Customize → Theme Options → Front Page. Select the page you created from the “First Content Block” or “Second Content Block” dropdown menus.
- If you want to show additional content in three columns (like “Watch The Film”, “Start Your Journey”, and “Donate” on the demo), you can create child pages to fill these areas, otherwise skip to step 8.
- Add another new page. Give it some content, More Tag and an optional Featured Image.
- In the Page Options module, choose the first page you created as the Parent Page, then Publish it.
- Create more child pages following steps 5 & 6. These will appear in columns in the parent content block.
- Optional: repeat steps 1-7 to set up the second content block.
Second Content Block on the Pena demo site.
To add a donation block like the one on the demo, add this code to the HTML editor on the content block’s page:
<em>Living On One Dollar</em> partnered with Whole Planet Foundation and Mayan Families to help support two great causes. Please help us support them!
<strong>Thank you! We appreciate your generosity!</strong>
<a class="blue" href="http://your-link-goes-here.com/">Donate Now</a>
To show Featured Content at the bottom of your front page, choose a tag and assign it up to 20 posts that you want to feature. Add the tag you selected under Customize → Featured Content.
Pena supports one Custom Menu in the Primary Menu location, which appears in the site’s header.
If you want to have a blue button for the menu item, navigate to the Customizer > Menus, click on the menu item you want to have a blue button and inside “CSS Classes” write “blue”.
Social Links Menu
- Navigate to Customize → Menus and add your menu.
- Add social media accounts from the “Custom Link” menu. The corresponding icon will appear in the social media bar.
Available Icons: CodePen, Digg, Dribbble, Facebook, Flickr, GitHub, Google+, Instagram, Linkedin, Pinterest, RSS Feed (urls with
/feed/), Tumblr, Twitter, Vimeo, WordPress, YouTube. Linking to any of these sites will automatically display its icon in your social bar.
Navigate to the Customizer‘s Header Image panel and upload your header image, which will appear below the site title/logo and menu in the header area.
Navigate to the Customizer’s Site Identity area to upload a custom logo. You can have a site title and tagline with your logo, a logo on its own, or a title and tagline without a logo.
Pena supports three footer widget areas: Footer Left, Footer Middle, and Footer Right. If you add widgets to these areas, they will be displayed on all pages of your site.
This theme offers three different page templates: “Grid,” “Full Width, No Sidebar,” and “Right Content, No Sidebar.”
This page displays all child pages with featured images in a grid. It’s perfect for listing projects, your team, or services.
- Create or edit a page, and assign it to the “Grid” page template.
- This page template displays all child pages of this page in a grid. Learn more about creating sub-pages (or child pages).
- The featured image, title, and content from each sub-page (or child page) creates a grid item.
Full Width, No Sidebar
This page template removes the sidebar, giving your content plenty of space to spread out!
Create or edit a page, and assign it to the “Full Width, No Sidebar” template.
Right Content, No Sidebar
This page template displays your content with the entry title to the left and the content on the right. This page template does not include the sidebar.
Create or edit a page, and assign it to the “Right Content, No Sidebar” template.
Under Customize → Theme Options → General, choose the Blog Layout for your site. You can change the position of the sidebar or opt for a list layout without a sidebar. Your chosen layout applies to archives as well.
Under Customize → Theme Options → General, you can also hide items, like post author and date, or choose to show full-length content or excerpts for posts.