Getting started with the Fast Loading WordPress theme, PageSpeed

Page Speed WordPress theme is a very light and highly customizable and fast loading WordPress theme. Below you can find instructions on how to use the theme and how to get the design we use in the theme screenshot. This is one of the few themes with SCSS compilation support with smart colour schemes and colour options.

If you have any quetions, suggestions or need help post on our support forum.

 

View Support Forum

 

Installing Page Speed WordPress Theme

  • Download the theme from the member’s area.
  • Goto themes -> appearance and click on add new in the top left corner.
  • Click on upload theme in the top left corner.
  • Upload the theme zip file you downloaded previously and click on install now and activate.

Initial setup

On the theme options page under appearance, there are few settings and tools that are not ideal to be present in customizer for technical reasons.

Settings -> Sidebars

Here, you can choose how many different sidebars you want.

  • Dedicated sidebars for the home page, enable this option if you want to use different sidebars on the home page.
  • Dedicated sidebars for default page template, PageSpeed comes with multiple page templates that have their own sidebars, but if you want the default template to have its own sidebars, enable this option.
  • Create sticky sidebars, Sticky sidebars are sidebars which float on the screen as the user scrolls through the page. They are ideal for giving you content and ads more screen time. Check this option to enable them. Note: Using AdSense ads in sticky elements violates their terms of service.

Settings -> Tools

  • Clear SASS Cache, PageSpeed WordPress theme uses SCSS for css and compiles it on the server to give you awesome and smart colours. For performance reasons, PageSpeed caches the SCSS files in the database for 30 minutes to make your WordPress customizer faster and efficient. If you updated the theme, clear the SASS cache here.
  • Update File System Status, Use this option to check if PageSpeed is able to write the CSS file.

Note: The tools page is removed from the release at WordPress.Org, you can deactivate and activate the theme to clear SASS cache. Be sure to update options to generate the stylehseet.

Customising PageSpeed theme

All the customisation options in PageSpeed are provided through the Customizer appearance->customiser. There are few minor inconveniences in customizer, a couple of things don’t work the way you expect them to due to technical limitations.

  1. When you change the layout of the site, you have to save your changes reload the page to get the sidebars specific to this layout under the widgets panel.
  2. When you change the header style,  you have to save your changes reload the page to get the menus specific to this layout under the menu’s panel.

This is because WordPress as of now doesn’t provide an option to dynamically reload panels in the customizer. We regret the inconvenience and we are sure this will be addressed in future WordPress releases.

Setting the site logos and icons @Site Identity

You can set your site logo and its alignment at appearance->customiser->site identity

  • The default logo is used for desktops. It can be of any size, but if you are using sleek header, it is advised to have a logo no taller than 72px.
  • Ideal logo size for mobiles is 320px wide. Height can be anything based on your logo aspect ratio.
  • Site icon is also used in sticky navigation, and in sticky menus on mobiles. Ideal aspect ratio for this is 1:1

Changing the site layout, container style and widths @Layout & Design

You can change the site layout, container style and widths and few other things at appearance->customiser->Layout & Design

Please not that if you change the site layout, sidebars my not be visible in customizer until you save your changes and reload.

Left sidebar width is only used when using centred layout. Please don’t confuse. We will disable it when it’s not relevant in a future release.

PageSpeed has two sidebar styles, you can toggle them using the Show sidebar widgets in card style.

Enable Sticky navigation bar and sleek header

You toggle these two options at appearance->customiser->header.

If you choose to sticky navigation bar with the sleek header, the header will become sticky. [Not implemented yet]

Change colours of your site @Color Settings

We will give you more control over the colours from the customizer in next versions, for now, you have four settings that you can play with.

  • Color schemes, these are predefined colour scheme built by us.
  • Override shades, If you want to override the shades used the colour scheme, enable this option and proceed to the options below it.
  • Invert light and dark colours toggles the light and dark colours to give your theme a dark colour scheme.

What is base colour and amount of base colour?

  • Base Color is the colour that is used to generate the shades used in the theme.
  • Amount of base colour indicates the level of colour in the shade. How green or how red a shade is. It is a relative number.

How to change thumbnail sizes and enable Excerpts @Thumbnails & Excerpts

This panel is divided into two sections.

  • Latest Posts, As the name suggests these settings apply to latest posts aka home page unless you are using a static front page
  • Archives, Categories, Tags: These settings apply to

How to get the layout & look in screenshot

Make these changes in the customizer

  1. Layout ->
    • Site Layout -> Centered
    • Layout Container -> Wide
  2. Header -> Enable sleek header
  3. Color Settings -> Color Schemes -> Amaranth
  4. Typography ->
    • Add Lato with weight 300 and Questrial with weight 400/normal in Google Fonts #1 and #2
    • Set primary font
      • Font stack to Questrial, sans-serif
      • Size to 18px
      • Line height 1.75
      • Weight normal
    • Set secondary font
      • Font stack to ‘Lato’, sans-serif
      • Weight to 300
      • Other two settings don’t matter.
  5. Thumbnails, Excerpts & Meta ->
    • Latest Posts Design ->
      • Homepage thumbnail size 640×0, Centered

Note: Choose a logo that is 48px to 72px tall with 5-10px space above and below the logo if you are using sleek header.

Advanced

PageSpeed theme provides the option to override scss variables in the customizer.

You can find the variables that you can override in page-speed/assets/css/src/{colors,variables}.scss files.