PowerSpeed is a free WordPress theme with high-end features that is optimized for performance. The goal in developing this theme was:
- To create an efficient and optimized theme that balances performance with a wealth of features.
- To refine the theme so that it feels like a high-end Premium level WordPress theme with all the bells and whistles.
- To provide as much customization options as possible.
- And to make it free and open source with no upselling or premium version to buy now or forever.
This site is powered by the PowerSpeed theme, but it can be configured to look however you need it for virtually any type of website. This article includes the download, documentation and full support (just a drop a comment below if you have any questions, comments, or concerns!)
Download PowerSpeed Theme
I wrote this theme so that I had one WordPress theme activated across my network of sites and all my client sites. I want to be able to keep the sites that I administrate on a modern theme that is performant and full of features that I maintain for years and years. It’s not a perfect theme, but I think it might live up to the pretentious name of PowerSpeed.
- PowerSpeed is a WordPress theme that is 100% free with no upselling, no paywalled features and no PRO upgrade to purchase. Ever.
- In terms of performance benchmarks, my goal was to score 95 or above on Google PageSpeed Insights on a fresh install of WordPress on a fast host.
- No plugin dependencies by default. If you want to slow your site down with plugins like I do, feel free, but in the spirit of optimization I avoided mandating any plugins for you to install.
- WooCommerce support built in to the theme.
- Based off of Bootstrap v4.5 to provide a wealth of formatting features and premium theme functionality which are configurable through the WordPress Theme Customizer.
- Fixed width and full width options available for each section of the theme.
- Over 100 open source fonts options are included within the theme itself, instead of hosted on another server.
- Almost all theme options are set in the Theme Customizer, with hundreds of settings available to configure and preview in real-time.
- In the WordPress admin panel, click on the Appearance menu, then the “Add New” button.
- Click the “Upload Theme” button.
- Click the Browse button and find the powerspeed.zip file that you downloaded.
- Upload powerspeed.zip to the /wp-content/themes/ directory.
- Preview, customize and/or activate the theme.
PowerSpeed comes with a library of open source fonts. This makes the theme over 20MB in size currently, which means you may need to increase your maximum upload size or use this alternate install method:
- Use FTP, SSH or your cpanel or alternative hosting interface to upload files to WordPress installation.
- Use 7zip or another file archiver, unzip the powerspeed.zip to a directory on your computer.
- Upload the extracted contents of the powerspeed.zip archive to the /wp-content/themes/ directory.
- Activate the theme through the Appearance menu in WordPress admin panel.
- Click on the Appearance > Customize menu item to configure the theme.
Who the PowerSpeed Theme is for and Who Should Avoid It
PowerSpeed is not for everyone.
If you want a flexible, highly configurable free theme that can power virtually any type of website, then PowerSpeed may be a good fit. If you’re looking to use Bootstrap 4.5.x in a WordPress theme, then PowerSpeed may be for you.
However, if you want a theme that requires no customization or you don’t want to use the Customizer to tweak hundreds of settings or you only use Bootstrap for prototyping and never use it on a production site… well those are all very valid reasons why someone should not use the PowerSpeed theme.
It also gives me room to improve the theme overtime to address those concerns (although removing Bootstrap probably isn’t going to happen.) This initial release has a rough user interface, in that I used mostly stock core WordPress customizer controls. For example, I used numeric inputs for a lot of settings where using a slider would be more appropriate. This, and other other areas offer room for improvement over time.
You can see all current bugs, feature requests as well as submit your own issues on GitHub:
How to Customize the PowerSpeed Theme
PowerSpeed uses the WordPress theme Customizer for most settings. This allows you to see every change you make to your theme in real time. By default, PowerSpeed is a plain looking theme, but using the Customizer you can make PowerSpeed into virtually anything. In this documentation I will cover all the available options and what they do.
To begin customizing your PowerSpeed on your site, there are a number of ways to start. You can actually preview the theme and begin making customizations without even activating the theme by using the Live Preview feature which also fires up the Customizer. You can navigate to wp-admin > Appearance > Customizer to access the Customizer at any time.
The basic layout section covers fixed and fluid widths as well as top and bottom margins for the theme sections.
Fixed or Fluid Width
You can use PowerSpeed as either a fixed-width theme, a fluid theme or a combination of both using the settings below. If unchecked, the area will be at maximum 1140px in width. If checked, the area will be 100% the full-width of the view port.
The following areas of the theme can be set to fluid width (when checked) or fixed width (max 1140px) when unchecked.
- Fluid width for the top-bar?
- Fluid width for the header image?
- Fluid width for the main menu and logo area?
- Fluid width for the front page jumbotron?
- Fluid width for the front page slideshow?
- Fluid width for the main content area?
- Fluid width for the footer area?
This allows you to use the theme with all or some sections of the theme to use fixed or fluid widths.
The distance between a section and the section that follows it can be increased or decrease by adjusting the top and bottom margins. If you wish to alter the left or right margin or padding, you can always use direct CSS in the Additional CSS section of the Customizer.
The following margin values can be set. 0 means no margin and negative values are acceptable and will produce negative margins. All margin values are in pixels.
- Header Top Margin
- Header Bottom Margin
- Topbar Top Margin
- Topbar Bottom Margin
- Menu Top Margin
- Menu Bottom Margin
- Article Top Margin
- Article Bottom Margin
- Sidebar Widgets Top Margin
- Sidebar Widgets Bottom Margin
- Footer Widgets Top Margin
- Footer Widgets Bottom Margin
- Frontpage Jumbotron Top Margin
- Frontpage Jumbotron Bottom Margin
- Frontpage Slideshow Top Margin
- Frontpage Slideshow Bottom Margin
Typography & Fonts
For performance, you should always use a web-safe font that requires no download. However, sacrificing performance for typography is a valid choice. PowerSpeed has 90 fonts included with the theme in addition to the web-safe fonts. Font download size is included so that you understand the performance penalty for each one.
You are able to set custom fonts for the following parts of PowerSpeed:
- Header Tags (H1, H2, etc.)
- Main Content area
- Main Menu
- Sidebar Headers
- Sidebar Content
- Footer Widget Headers
- Footer Content
All fonts included with PowerSpeed are licensed under the OFL font license. You can find the full download of these fonts by searching for the font on this website:
Here is a complete list of all fonts available with PowerSpeed, including the font download size (click to expand the full list.)
You can choose background images for all of the repeating areas of your site such as the header, sidebar and other sections. You can use transparent png images in order to use the background color you configure in the Colors Customizer section.
The following areas can have a background image applied:
- Body Background – This background image is applied directly to the body tag, the root element of all pages.
- Header Background – This background image is applied to the header area at the top. This is the background image. Note that there is an optional dedicated header image area as well.
- Topbar Background – This background image is applied to the optional topbar area in the header.
- Main Menu Background – This background image is applied to the main menu area in the header.
- Main Content Background – This background image is applied to the main content area that displays pages, posts, archives and more.
- Sidebar Background – This background image is applied to the main sidebar area.
- Footer Background – This background image is applied to the footer.
- Footer Sidebars Background – This background image is applied to the footer sidebar areas.
- Frontpage Jumbotron Background – This background image is applied to the optional jumbotron on the frontpage.
Each background image has the following options that you can set:
- The background image – Select from the media library or upload a new picture.
- Repeat settings – How the image repeats. Options are Horizontal and Vertical, Horizontal only, Vertical only, No repeating, Repeat without clipping or Stretch or shrink to fit.
- Attachment settings – How the background attaches to the element. Options are Scroll with page, Fixed position, no scroll, or Scroll inside local element only.
- Position settings – This is where the background image will inside the element. Options are Top left, Top center, Top right, Center left, Center, Center right, Bottom left, Bottom center, or Bottom right.
You can mix and match different border types for different common sections.
There are three border areas you can customize:
- Main content
Each of those three areas has two border settings you can change:
- Border Style – This is how the border is drawn. Options include: No borders, Border, Small Rounded, Medium Rounded, Large Rounded, Rounded Circle, and Rounded Pill.
- Border Width – 0 means no border and negative values are ignored. All border values are in pixels.
This customizer screen is currently unmodified from WordPress defaults. You are able to change your title, tagline, site icon and logo from this screen.
Header Text Color is a default WordPress option and so is outside and above the custom sections listed below.
The core text, link, and background colors.
- Main Body Background Color – The background color of the main body.
- Heading Color – The color of H1, H2, H3, etc. tags that do not have their own setting. These are the header tags in your main content area.
- Default Text Color – The color of text if not defined elsewhere. Used for the text in your main content.
- Default Link Color – The color of links if not defined elsewhere. Used for the links in your main content.
- Default Link Hover Color – The color of highlighted links if not defined elsewhere. Used for the highlighted links in your main content.
General color options for the header. Other parts of the header including the top-bar and main menu have sections of their own below.
- Header Background Color – The background color of the header section.
The optional top bar. If you do not see any changes in the preview, you probably have it disabled.
- Top Bar Background Color – The background color of the optional topbar which is located in the header section.
- Top Bar Text Color – The text color inside of the topbar.
- Top Bar Link Color – The link color inside of the topbar.
Main Menu & Logo
The main menu and logo area of the header.
- Main Menu Text Color – The main menu is comprised of links, so the text color here is the link color.
- Main Menu Hover Color – When you hover over a menu, this is the color when hovering.
- Main Menu Background Color – The background color of the menu.
- Main Menu Border Color – The border color of the menu.
The main sidebar and widgets. Other widget areas have their own colors.
- Sidebar Widget Link Color – The color of links inside your sidebar widgets.
- Sidebar Widget Heading Tag Color – The color of heading tags inside your sidebar widgets.
- Sidebar Widget Text Color – The color of text inside your sidebar widgets.
- Sidebar Widget Background Color – The background color of sidebar widgets.
Tags & Categories
Wherever tags or categories are displayed, these colors apply.
- Tag Link Color – The color of the linked tag text.
- Tag Background Color – The background color of the tags.
- Categories Link Color – The color of the linked categories text.
- Categories Background Color – The background color of the categories.
The core colors used in the footer.
- Footer Background Color – The background color of the entire footer area.
- Footer Text Color – The default text color of the footer area.
The colors used in the footer widgets.
- Footer Widget Link Color – The color of links inside your footer widgets.
- Footer Widget Heading Tag Color – The color of heading tags inside your footer widgets.
- Footer Widget Text Color – The color of text inside your footer widgets.
- Footer Widget Background Color – The background color of footer widgets.
The colors used in the optional jumbotron on the front-page.
- Jumbotron Background Color – The background color of the jumbotron.
- Jumbotron Text Color – The color of text inside the jumbotron.
- Jumbotron Link Color – The color of links inside the jumbotron.
The colors used in the optional slideshow on the front-page.
- Slideshow Text Color – The color of the text displayed on the slideshow.
- Slideshow Link Color – The color of linked text in the slideshow.
The header area includes the optional top-bar area, the header image, the logo, tagline, and the main menu area. Most of these settings, aside from the header image, can be configured from this menu.
The optional top-bar is a row above the header image, logo, and menu. The top-bar can display your social media icons, a search box and/or an alert message to your visitors.
This section has two options:
- Display the top-bar that contains the social media icons, alert, and search box? – Check this to display the top-bar area, leave it unchecked to hide it.
- Display the search box in the top-bar? – If you’re showing the top-bar, then this option will display the search box in the topbar when checked, or hide it when unchecked.
Alert in the Top Bar
The optional alert allows you to put a message to your visitors at the top of every page.
This section has 7 different options that you can configure:
- Display the alert in the top-bar? – When checked and the top-bar is enabled, this will display the alert section inside of the topbar area.
- Place the alert in the same row as the social media icons and search bar? This will help to reduce the size of the top-bar. If unchecked, the alert will have a row to itself below the search and social media icons. – When checked, this will place the alert in the same row as the social media icons and search bar.
- What style or type of alert is this? – This allows you to change the style of the alert to one of the following options: Unstyled Alert, Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or No alert. The ‘No alert’ setting will cause the alert to be displayed without any type of styling, so it will appear as regular text. The ‘Unstyled Alert’ setting will still render the alert in a Bootstrap alert class, but without applying other styling to it.
- The text inside of the alert – This is the text that is displayed in the alert. Right now, no HTML or shortcodes are allowed, as this is text only.
- The URL you want to link to for more information. Leave blank for no link. – The URL for the link inside the alert. Leave completely blank if you don’t want to use a link in your alert.
- The text for the link inside of the alert – The anchor text for the link inside of your alert. If you have a blank link, then this anchor text is ignored.
Settings that effect the main menu.
This section has 2 options that you can configure:
- Give the main menu an entire full row to itself – When this option is checked, the main menu will no longer share a row with the logo and byline. When unchecked, the main menu shares a row with the logo, title and byline.
- Should the menu align to the left, center, or right? – Allows you to determine how the main menu should be aligned, either to the left, center, or right.
The header image is an optional image that can be displayed in your header. The PowerSpeed theme works best with a header image of 1920 × 220 pixels, but other sizes can be used.
If the topbar section is enabled and you put URLs to your social media profiles in this section, then icons will appear in the topbar that link to your social media accounts. You need to define the size of the icons using these two settings:
- Social Media Icon Width – The width of your icons. Default is 42px and this value should match your height.
- Social Media Icon Height – The height of your icons. Default is 42px and this value should match your width.
Includes support for the following icons: DeviantArt, Facebook, Flickr, Instagram, LinkedIn, Pinterest, Tumblr, Twitter, Vimeo, YouTube, email and RSS links.
You should switch to your front page while editing these settings. You should already have assigned the Homepage to a static front page. If you’re not familiar how to do that, then follow this official WordPress documentation: https://wordpress.org/support/article/creating-a-static-front-page/
There are two main options to configure. These options only apply to the homepage when set to a static front page.
- Do you want no sidebar or one on the left or right on the front page? – Options are Left Sidebar, Right Sidebar, or No Sidebar.
- What order should the frontpage elements appear? – Using the dropdown you can arrange the Slideshow, Jumbotron, and Frontpage to appear in whatever order you wish.
Featured Posts Settings
The featured posts allows you to promote specific pages, posts, or categories. This appears at the top or bottom of the page you have selected to be the frontpage.
This section has 8 different options that you can configure:
- Display the featured posts? – By default this is unchecked, which means it will not show the featured posts. When checked, this will enable the section.
- Do you want the featured posts at the top or bottom of the main page? The Featured Posts will either display before the frontpage or after the frontpage based off of what you select here.
- The heading text for the featured posts – The header text for this section.
- Some text to introduce the featured posts – Text underneath the header for this section, but before the featured posts start displaying.
- Change how the featured posts are presented – Currently, there are two options here. Card (image, title, description) will display the featured posts in a Bootstrap card with the image first, then the title and then the description. The next option is Portfolio (image only with title on hover) which displays the posts as images only until you hover over an image (which reveals the post title.)
- What post type do you want to feature? – Select from page, post, and virtually any custom post type.
- Number of posts to feature – The number of posts to display at maximum. If you choose more posts than exist, it will stop sooner. However, this number effects row distribution so you should not set it higher than the actual number of existing posts you want to feature. Using a value of -1 will feature all posts.
- Number of rows to display – How many rows do you want to dedicate to the featured posts display?
This is a big block on the front page that you can use to communicate your main message and call to action.
This section has 7 settings that you can configure:
- Display the jumbotron? – If checked, this will display the jumbotron on the frontpage. Otherwise the section will be hidden.
- The heading text inside of the jumbotron – The big header text at the top of the jumbotron. Leave blank for no header section.
- The top text inside of the jumbotron – The top text for the jumbotron, displayed underneath the header text. Leave blank for no top text section.
- The bottom text inside of the jumbotron – The bottom text for the jumbotron, displayed underneath the top text. Leave blank for no bottom text section.
- The URL you want to link to for more information. Leave blank for no link – The link in the jumbotron. Leave blank if you don’t want a link.
- The text for the link inside of the jumbotron – The link text to use if you have a link URL defined. This is ignored if your link URL is blank.
- What style or type of link? – You can choose from the following button style: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Unstyled
Slideshow images can be different sizes, but this will cause other elements on the page to shift as different sized slides are displayed. For the best results, always use the same image dimensions for all slides in your slideshow.
A slideshow featuring at a minimum 1 slide and at a maximum 9. To make a slide appear in the slideshow you must add an image to it. If you want to remove a slide from the slideshow, remove the image for the slide to hide it. The 1st slide is special and will show even if there is no image.
This section has 5 main settings that you can configure before setting up your individual slides:
- Display the slideshow? – If this setting is checked, the slideshow will be displayed (even if no slides have been set up.) If unchecked, the slideshow section will be hidden even if slides are set up.
- What type of transition do you want to use when changing slides? Three options are available: No transition, Slide, and Crossfade. No transition will instantly change between slides, Slide will move one image to side while bringing the next slide in from the opposite direction and Crossfade will fade the outgoing and ingoing slides together during the transition.
- Display the left and right arrows on the slideshow? – When this setting is checked, the left and right arrows will be displayed (even if there are no slides configured.) When this setting is disabled, there will be no right or left navigation arrows for the slideshow, even if all slides are configured.
- Display the bottom slide indicator? This displays on the bottom of slides and shows the current position and allows users to click on each slide in the slideshow to view it. – When this setting is checked, there is a bottom navigation area that will display each slide. When this setting is disabled, there will be no bottom slide navigation feature.
- What button style for the slideshow links? – You can choose from the following button style: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Unstyled
Creating Up to 9 Slides for the Slideshow
When the slideshow is enabled, it will always display the first slide even if it is not configured. The slideshow can show up to 9 slides. To disable a slide, remove it’s image. Again, the first slide is special and will always appear even if there is no image associated with the slide. Other than that one caveat, the 9 slides are all configued the same. Here are the 5 options that all 9 slides have available to them:
- The image for this slide – Except for slide #1, if you have no image defined then the slide will not appear. For the best result, all your slide images should have the exact same width and height dimensions.
- The heading text inside of the slide – This is the header text that is displayed on the slide image. Leave completely blank to disable the header on the particular slide.
- The text inside of the slide – This is the text that is displayed inside and on the slide image. Leave completely blank to disable this text area on the particular slide your editing.
- The URL you want to link to for more information. Leave blank for no link – The link URL for the current slide. Leave completely blank if you don’t want this slide to have a link.
- The text for the link inside of the slide – The text used for the link. If the link URL is empty then this setting is ignored.
Blog Index, Posts & Archives
These settings effect the page that shows off all blog entries as well as search results and other archives. It is recommended that you switch to one of those pages in the preview area while editing these settings.
- Display the metabox that contains the published date, author, categories and tags? – When checked, this will display the box that contains the meta data for each post.
- Display the published date and author in the metabox? – When checked, this will display the published date and author in the box.
- Display the categories in the metabox? – When checked, this will display the categories.
- Display the tags in the metabox? – When checked, this will display the tags.
The links between pages, posts, and other pagination can be styled here. Sites with no content will not trigger many instances of these links.
There is one option to configure:
- What style or type of link for next & previous posts, pages, and other pagination? – You can choose from the following button style: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Unstyled
The footer is the bottom area of the theme. There are three options you can configure in this section:
- The copyright notice in the footer – The text to use for the copyright at the very bottom of the theme.
- Should the footer copyright notice align to the left, center, or right? – You can choose to align the copyright text either to the left, center, or right.
- Display the 3 widget columns in the footer – When checked, this will display upto 3 columns of footer widgets. Note each footer column will only appear if you have one or more widgets in that column. That means that if you enable this setting but have no widgets in your footer areas, then nothing will appear here.
About the Creation of This Theme
When I am personally looking for new WordPress themes, it’s either for an unproven site of my own that may or may not generate money or it’s for an established business that has the money to spend on buying and customizing a premium theme or having a fully custom developed theme for them. This means I don’t want to spend money on a theme for a hobby site and I’m managing dozens of different themes across all the websites I operate.
This was not a good situation for me which is why I wanted to create a free WordPress theme with no upsell that was fast, packed full of usable features and versatile enough to be customized to perfectly match any website niche. That way I could use it mimic the look and feel of all of the website I run while using a single theme to minimize my upkeep.
Between 2006 and 2012 I created over a hundred WordPress themes (only 4 unique codebases through out those years.) However, between 2013 to 2020 I was busy with game development and sysadmin duties which pulled me away from active WordPress theme development (although I still built and maintained several WordPress sites and a plugin during this time period.)
So in 2020, when I wanted to create this free premium-quality theme, I knew I needed to brush up on 7 years away from WordPress theme development. My site is all about online courses, so I figured I’d shop around for a good online course for creating WordPress themes and use that to help me fill in the gaps and remind me of everything I’d forgotten or that has changed over the years.
After some comparisons, I ended up using and completing this Skillshare course: