Scribd
Upload
26 views

WordPress Custom Theme Guide

Uploaded by

pozycjonujemy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

WordPress Custom Theme Guide

Uploaded by

pozycjonujemy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Instruction for Creating a Custom

WordPress Theme
This document provides step-by-step instructions for creating a custom WordPress theme
based on the visual design of a space-themed website. This guide uses the Underscores
theme framework and Elementor plugin to design and customize a professional website
with modern space aesthetics.

1. Download Underscores Theme


Visit the official Underscores website (https://underscores.me/) and generate a custom
theme with your preferred name. This will provide you with a bare-bones WordPress theme
as the base. Download the theme and upload it to your WordPress site via Appearance >
Themes > Add New.

2. Install Elementor Plugin


Elementor is a drag-and-drop page builder plugin that simplifies designing WordPress
pages visually. To install Elementor:

 1. Go to Plugins > Add New.


2. Search for 'Elementor'.
3. Click 'Install' and then 'Activate'.

3. Customize Theme Using Elementor


Once Elementor is installed, start customizing the theme:

 1. Create a new page and click 'Edit with Elementor'.


2. Add a new section and set the layout to 'Full Width'.
3. Set the background image to a space-themed image (e.g., a picture of Earth).
4. Add your heading text with a white font to match the space theme.
5. Insert buttons with accent colors (e.g., purple) for 'Products' and other call-to-action
elements.

4. Set Global Styles (Fonts, Colors)


To match the aesthetics from the provided design, configure global styles in Elementor:

 1. Go to Elementor > Site Settings.


2. Set the primary color to dark tones (e.g., black or dark blue) and accent colors like
purple or orange.
3. Choose a modern, clean font like 'Montserrat' or 'Roboto' for headings and text.
4. Save and apply the global settings to maintain consistency across the website.

5. Create the Menu and Navigation


To replicate the floating navigation menu, follow these steps:

 1. Go to Appearance > Menus.


2. Create a new menu with links to your pages (e.g., Home, Products, Projects, Contact).
3. Assign the menu to the 'Main Menu' location.
4. Customize the menu's appearance using the Elementor header builder, and set
transparency if needed.

6. Optimize for Mobile and Responsive Design


To ensure your website looks great on all devices, switch to mobile view in Elementor:

 1. Open the Elementor editor and click on the mobile icon at the bottom left.
2. Adjust padding, margins, and font sizes for mobile screens.
3. Test responsiveness on tablets and desktops as well.

7. Add SEO Optimization with Yoast SEO


Install the Yoast SEO plugin to optimize the website for search engines:

 1. Go to Plugins > Add New.


2. Search for 'Yoast SEO' and click 'Install'.
3. After activation, configure the SEO settings for your site, including meta tags and XML
sitemaps.

8. Launch and Test the Website


Before going live, thoroughly test the website on different devices and browsers. Ensure all
pages load correctly, images are optimized, and links work as expected. Once satisfied,
launch the site by making it public.

You might also like