Your theme is what controls the look and appearance of your site; this is what people see when they visit your site.
Every newly created site has the same default theme. The last thing you want is to look like all the other sites.
Here’s an example of the look of a newly created site:
Here’s an example of a site using a customised theme:
You can change your theme as often as you like!
USING THE CUSTOMIZER
The customizer is designed to make it easier for you to customize your theme and see the results in real-time without having to visit your site. You can customize any theme before you activate it.
Here is how you do it:
1. Go to Appearance > Themes.
2. Click on ‘Live Preview‘ on the theme you want to use.
Hovering your cursor over a theme brings up theme action menus including the Live Preview link.
Or if you want to customize your current theme, click on ‘Customize‘ under the active theme.
4. This loads the customizer. Work through the control panels on the left to customize the theme to preview the theme changes in real-time before activating it on your site.
5. Once you’re happy with the changes you click ‘Save & Publish’.
THINGS TO CHECK AFTER CHANGING TO A NEW THEME
When you change a theme, nearly everything comes with you. Changing your theme doesn’t affect your content in posts, pages, media, blogroll.
However, there are a few things you’ll want to check afterwards:
- Widgets – each theme supports different widget locations. If the new theme has fewer widget areas some of the widgets used previously may be moved to the Inactive Widget area. The best option is to place the widgets back in the desired widget area after activating the theme using Appearance > Widgets.
- Custom menus – activating a new theme doesn’t automatically apply your custom menu because each theme supports different custom menus. You’ll need to reassign your custom menus to the locations you want them in the new theme. You can do this using the Navigation control on the Customizer or using Appearance > Menu. You can learn more about custom menus here.
- Featured Images – some themes like Magazino, Hueman, Gridster Lite use featured images for special features such as slideshows, post thumbnails and images attached to featured posts. If a featured image isn’t set these themes display a default image where the featured image would appear. A featured image is added using the Featured Image module under Page attributes on the post editor.
Most of our themes are mobile-friendly themes. Mobile-friendly themes work and behave differently from older themes.
Mobile-ready themes, also known as responsive themes, are designed to optimize the layout of your site based on which device someone is using to view your site. If you view a non-responsive theme on a phone it automatically zooms out so that your entire site can be seen. This means your readers need to zoom in to read your content.
Responsive themes are designed to ensure that the important content like your site title, post titles and post content can be easily read on smaller screens without needing to zoom.
Responsive themes feel like a huge change when you’re used to non-responsive themes because of responsive theme layout changes as the device size changes. The font size may also be larger than what you are used to with non-responsive themes.
With a responsive theme, the sidebars move below the post content area and the top navigation changes or minimizes to improve reading on smaller screens.
The layout doesn’t change on a non-responsive theme as these older themes that are designed to be viewed on desktop computers aren’t optimized for smaller devices.
The same site viewed on a smartphone. Responsive theme (left) Non-responsive theme (right)
The options available in the Customizer depend on the theme.
Most themes have the following Customizer controls:
- Site Title – change Site title and tagline
- Header – add a header image
- Colors – change header text color and background color
- Navigation – select which custom menu to use on the site
- Widgets – add, remove and modify widgets in the designated widget areas
- Static Front page – used to set a static front page
- Featured Content – customize which tag is used for featured content such as posts sliders if the theme supports it
Change Site Title & Tagline
Used to change the site title and tagline on your site. Not all themes display taglines. The site title and tagline are normally displayed in or near the header area of your site and the site title is also used when visitors bookmark your site in their web browser.
If you want to remove the site title (and the tagline if your theme displays the tagline) you uncheck ‘Display Header Text’ under Site Title & Tagline section of the Customizer and then click Save & Publish.
This is a handy option if your site title and tagline are displayed over the top of your custom image header and interfere with the look you are trying to achieve.
Change Theme Colors
‘Colors’ controls the color of the header text and background color. Which options are included depends on the theme. Not all themes allow you to change the header text color. Changes to header text color take time and you need to wait for the page to refresh to view the change.
Upload Custom Header Image
The Header Image allows you to upload your own custom header image and/or a select a default header image. If you don’t see the Header Image section in the Customizer it means the theme doesn’t support these options.
Using a custom header image
Uploading your own custom header image is one of the best ways of giving your site your own personal touch.
- Only .jpeg, .gif, and .png files can be used for header images.
- For best results we recommend you crop and re-size the image to the exact dimensions recommended for the theme before uploading by using an image editing software (refer to recommended dimensions in the Header section in the Customizer).
You upload your custom header image as follows:
1. Click on Add new image in the header image section of the customizer.
2. Choose an image from your media library or upload a new image from your computer.
- Only .jpeg, .gif, and .png files can be used for image headers.
- For best results we recommend you re-size the image to the exact dimensions recommended for the theme before uploading by using image editing software .
3. Click on Select and Crop.
4. Click on Crop image.
5. Your new header image should appear in your site preview window.
6. Click Save & Publish on the Customizer to activate the new header on your site.
Using a Default Header Image
Many themes include a selection of default header images. This is a good option if you don‘t want to upload your own image and you prefer to use one of the default header images or display a random default header image on each page.
If your theme includes default header images you’ll normally find them underneath the option to upload your own custom header image.
1. Click on the default image you want to use for your header image or click on ‘Randomize selected headers” if you would like to randomize the default header images displayed.
2. Your new header image should appear in your site preview window.
3. Click Save & Publish on the Customizer to activate the new header on your site.
Upload Custom Background Image
Many themes allow you to upload an image to your site's background. A background image is another great way of adding that personal touch to your site.
1. Go to Appearance > Customize in your dashboard.
Or click on ‘Customize‘ under the active theme.
2. Click on Background Image in the Customizer.
- If you don’t see the Background Header section in the Customizer it means the theme doesn’t support this option.
3. Click on Add new image.
4. Choose an image from your media library or upload a new image from your computer.
- Only .jpeg, .gif, and .png files can be used.
5. Click on Choose Image.
Once you have selected an image the background image options will appear:
- Background repeat: controls if the background image is repeated. Choice are:
- No Repeat -background image is only displayed once on the page.
- Tile – background image is tiled horizontally and vertically.
- Tile horizontally – the background image only repeats horizontally.
- Tiled vertically – the background image only repeats vertically.
- Background position: allows you to control the position of the background image. Options are left, center and right.
- Background attachment: determines if you want the image to scroll with the content or to remain ‘fixed’ in place when a reader scrolls down the page.
For best results we recommend you use Tile, left and Scroll.
6. Your new background image should appear in your site preview window.
7. Click Save & Publish on the Customizer to activate the new background on your site.
Using a Static Front page
By default, your home page is your site post page however you can change this so your homepage is a static front page and your posts are sent to a different page on your site.
Most class sites use a site post page for their homepage and use ‘Your Latest Posts’ for the front page displays.
OTHER THEME OPTIONS
Some themes have extensive theme customization options which aren’t supported by the customizer.
These types of themes add a theme option menu item under Appearance once the theme is activated. To do more extensive customization you need to go to Appearance > Theme Options.
UPLOADING CUSTOM THEMES
Due to how our infrastructure is designed, we are unable to support the uploading of custom themes. Some CampusPress plans allow for custom themes. You can read about how to request a custom theme here.
The Simpler CSS plugin enables you to modify the theme’s fonts, colors, border and backgrounds by adding custom stylesheets to your site. Refer editing CSS for more information.