How to Create A Custom WordPress Theme Using the Underscores Starter?

23 minutes read

To create a custom WordPress theme using the Underscores starter, follow these steps:

  1. Visit the Underscores website (underscores.me) and click on the "Generate" button to start creating your theme.
  2. Enter a unique name for your theme and click on the "Generate" button again.
  3. Download the generated theme files which are provided as a zip package.
  4. Extract the zip package files to a folder on your computer.
  5. Open the extracted folder and navigate to the "style.css" file. Open this file in a text editor.
  6. Modify the theme information in the comments section at the top of the "style.css" file. Update the theme name, author, description, and other relevant details.
  7. Next, navigate to the "functions.php" file and open it in a text editor.
  8. Customize the theme functions and add any additional functionality you desire to this file. Underscores offers a variety of helpful functions to get you started.
  9. If needed, create a new folder called "template-parts" inside the theme folder. This folder will hold reusable template files for different sections of your site.
  10. Open the "index.php" file in a text editor and start modifying it to match your desired site layout. You can copy and reuse code from other template files provided by Underscores.
  11. Customize the CSS styling of your theme by editing the "style.css" file and adding your own CSS rules.
  12. Create additional template files such as "header.php", "footer.php", "sidebar.php", etc., as per your design requirements.
  13. If needed, create a new folder called "assets" inside the theme folder. This folder can hold your images, JavaScript files, or any other static assets for your theme.
  14. Upload the entire theme folder to your WordPress installation. Simply compress the folder into a zip file and navigate to your WordPress dashboard.
  15. Go to "Appearance" → "Themes" and click on the "Add New" button.
  16. Select the "Upload Theme" option and choose the zip file containing your custom theme.
  17. Click on the "Install Now" button and then activate your custom theme.


Your custom WordPress theme, built using the Underscores starter, is now ready to be used. You can further customize and enhance it to meet your specific website needs.

Best WordPress Books of December 2024

1
WordPress: The Missing Manual: The Book That Should Have Been in the Box

Rating is 5 out of 5

WordPress: The Missing Manual: The Book That Should Have Been in the Box

2
WordPress All-in-One For Dummies

Rating is 4.9 out of 5

WordPress All-in-One For Dummies

3
Professional WordPress: Design and Development

Rating is 4.8 out of 5

Professional WordPress: Design and Development

  • Wrox Press
4
WordPress Plugin Development Cookbook: Create powerful plugins to extend the world's most popular CMS, 2nd Edition

Rating is 4.7 out of 5

WordPress Plugin Development Cookbook: Create powerful plugins to extend the world's most popular CMS, 2nd Edition

5
Wordpress for Beginners: 3 Books in 1- A Comprehensive Beginners Guide+ Tips and Tricks+ Simple, Effective and Advanced Strategies to Build a Beautiful WordPress Website

Rating is 4.6 out of 5

Wordpress for Beginners: 3 Books in 1- A Comprehensive Beginners Guide+ Tips and Tricks+ Simple, Effective and Advanced Strategies to Build a Beautiful WordPress Website

6
WordPress 5 Cookbook: Actionable solutions to common problems when building websites with WordPress

Rating is 4.5 out of 5

WordPress 5 Cookbook: Actionable solutions to common problems when building websites with WordPress

7
WordPress in easy steps

Rating is 4.4 out of 5

WordPress in easy steps

8
WordPress 5 Complete: Build beautiful and feature-rich websites from scratch, 7th Edition

Rating is 4.3 out of 5

WordPress 5 Complete: Build beautiful and feature-rich websites from scratch, 7th Edition

9
Building Web Apps with WordPress: WordPress as an Application Framework

Rating is 4.2 out of 5

Building Web Apps with WordPress: WordPress as an Application Framework

10
1-Hour WordPress 2021: A visual step-by-step guide to building WordPress websites in one hour or less!

Rating is 4.1 out of 5

1-Hour WordPress 2021: A visual step-by-step guide to building WordPress websites in one hour or less!

11
Professional WordPress Plugin Development, 2nd Edition

Rating is 4 out of 5

Professional WordPress Plugin Development, 2nd Edition

12
WordPress For Dummies (For Dummies (Computer/Tech))

Rating is 3.9 out of 5

WordPress For Dummies (For Dummies (Computer/Tech))


How to create a custom 404 page in WordPress?

To create a custom 404 page in WordPress, you can follow these steps:

  1. Start by accessing your WordPress admin dashboard.
  2. Go to "Appearance" and then select "Theme Editor."
  3. In the Theme Editor, look for the "404.php" file on the right-hand side. If it doesn't exist, you can create a new file.
  4. Click on the "404.php" file to open it for editing.
  5. Customize the file's contents to create your desired 404 page. You can add HTML, CSS, and even some PHP code if needed.
  6. Once you finish customizing the file, click the "Update File" button to save the changes.


Now, when a user encounters a 404 error on your website, they will be shown the custom 404 page you created instead of the default WordPress error page.


How to install WordPress on a web server?

To install WordPress on a web server, you can follow these steps:

  1. Choose a web hosting provider: Look for a reliable web hosting provider that offers PHP and MySQL support. Some popular options include Bluehost, SiteGround, and HostGator.
  2. Register a domain name: If you don't have a domain name, you will need to register one. Most hosting providers offer domain registration services as well, so you can do it while signing up for the hosting package.
  3. Download WordPress: Visit the official WordPress website at wordpress.org and download the latest version of WordPress.
  4. Create a database: Log in to your hosting account and find the database management section (usually accessed through a tool like phpMyAdmin). Create a new database and remember the database name, username, and password as you will need them during WordPress installation.
  5. Upload WordPress files: If your hosting provider offers cPanel, in the control panel, look for a file manager or FTP section. Upload the WordPress files to your preferred directory. If you want your website to appear on the root domain (e.g., example.com), upload the files to the public_html or www folder.
  6. Unzip and configure WordPress: Extract the downloaded WordPress file, and you will get a folder with all the WordPress files. Move all files from the extracted folder to your website's root directory. Rename the 'wp-config-sample.php' file to 'wp-config.php'. Open the 'wp-config.php' file and update the database details (database name, username, and password) you created earlier.
  7. Run the WordPress installation: Open your web browser and navigate to your website's domain name. You will see the WordPress installation page. Select your language and click on the "Let's go" button.
  8. Enter database details: On the next screen, enter the database information you used in the 'wp-config.php' file. Add the database name, username, password, and database host. The database host is typically localhost unless specified otherwise by your hosting provider.
  9. Complete installation: Click on the "Run the installation" button to proceed. On the next screen, enter your website title, username, password, and email address. Finally, click on the "Install WordPress" button.
  10. Log in to your WordPress dashboard: After the installation is complete, you can log in to your WordPress dashboard using the chosen username and password. From here, you can customize your website, install themes and plugins, and start creating content.


That's it! You have successfully installed WordPress on your web server, and now you can start building your website or blog.


How to set up a local development environment for WordPress?

To set up a local development environment for WordPress, follow these steps:

  1. Install a local server software: Start by installing a web server software like XAMPP (available for Windows, Mac, and Linux) or WAMP (Windows only) to set up a local Apache server. These software packages also include MySQL database and PHP support.
  2. Install WordPress: Download the latest version of WordPress from the official website. Extract it and copy the folder to the appropriate web server directory (e.g., "htdocs" for XAMPP). Alternatively, you can clone the WordPress repository from GitHub to your server directory.
  3. Configure the database: Open the local server software and start the Apache and MySQL modules. Access the PHPMyAdmin interface and create a new database for your WordPress site.
  4. Configure WordPress: Open your web browser and access the local WordPress installation by typing "localhost/wordpress" (or the appropriate URL) into the address bar. Select your preferred language and proceed with the setup.
  5. Connect WordPress to the database: When prompted, enter the necessary database details such as database name, username, and password that you set up in PHPMyAdmin.
  6. Complete the WordPress installation: Follow the on-screen instructions to complete the installation. Set up your site title, username, password, and email address for the admin account.
  7. Access the WordPress dashboard: Once the installation is complete, you can access the WordPress dashboard by going to "localhost/wordpress/wp-admin" (or the URL you configured).


You have now successfully set up a local development environment for WordPress. You can start customizing your site, installing themes and plugins, and testing your WordPress project locally.

Best WordPress Hosting Providers in December 2024

1
Vultr

Rating is 5 out of 5

Vultr

  • Ultra-fast Intel Core
  • Low Price and High Quality
  • High Performance and Cheap Cloud Dedicated Servers
2
Digital Ocean

Rating is 4.9 out of 5

Digital Ocean

  • Active Digital Community
  • Simple To Use
  • Starting as low as 5$ per month
3
AWS

Rating is 4.8 out of 5

AWS

4
Cloudways

Rating is 4.7 out of 5

Cloudways


How to create a custom navigation menu in WordPress?

To create a custom navigation menu in WordPress, you can follow these steps:

  1. Login to your WordPress admin panel.
  2. Go to Appearance -> Menus.
  3. Click on "create a new menu" at the top of the page.
  4. Give your menu a name and click on the "Create Menu" button.
  5. You will now see a list of available pages, posts, categories, and other custom links on the left-hand side of the screen. Select the items you want to add to your menu by checking the respective checkboxes and click on the "Add to Menu" button. You can also create custom links by providing the URL and link text in the "Custom Links" box.
  6. Once you have added the desired items to your menu, you can drag-and-drop them to arrange their order.
  7. Expand the "Menu Settings" section and check the locations where you want the menu to appear (usually, primary navigation or header).
  8. Click on the "Save Menu" button to save your custom navigation menu.


You have now successfully created a custom navigation menu in WordPress. You can preview the changes on your website to ensure it appears correctly.


What is the template hierarchy in WordPress?

The template hierarchy in WordPress refers to the system by which WordPress determines which file to use to display a specific page or content on a website. This hierarchy follows a specific order and allows developers to create custom templates for different types of content.


The template hierarchy starts with the most specific template file and falls back to more generic files if a specific template is not found. Here is an overview of the template hierarchy in WordPress:

  1. Custom Page Template: If a custom page template is assigned to a specific page, WordPress will use that template file for displaying that page.
  2. Custom Post Type Template: If a custom post type is registered and associated with a specific template file, WordPress will use that template file to display individual posts of that post type.
  3. Custom Taxonomy Template: If a custom taxonomy is registered and associated with a specific template file, WordPress will use that template file to display the archive pages for that taxonomy.
  4. Category Template: If a category is specified for a post or a category archive page is being displayed, WordPress will look for the template file specifically designed for that category.
  5. Tag Template: Similar to category templates, if a tag is specified for a post or a tag archive page is being displayed, WordPress will look for the template file specifically designed for that tag.
  6. Author Template: In the case of author archive pages, WordPress will search for the template file specific to the author.
  7. Date Template: If an archive page is being displayed for a specific date or period, WordPress will look for the template file designed for that date/archive.
  8. Archive Template: If none of the above templates are found, WordPress will use the archive template to display archive pages, including category, tag, date, and custom post type archives.
  9. Search Template: When a search result page is requested, WordPress will use the search template file to display the search results.
  10. 404 Template: If no other templates match the requested page or content, WordPress will fall back to the 404 template file to display the "Page Not Found" error page.


Developers can create customized versions of any template in the hierarchy by creating a file with the corresponding name and placing it in the theme folder. This allows for extensive customization and control over the appearance and functionality of different parts of a WordPress website.


What are WordPress template tags and how to use them?

WordPress template tags are functions used within the theme files of a WordPress theme to display dynamic content. These tags retrieve and display information from the WordPress database or perform specific tasks.


To use WordPress template tags, follow these steps:

  1. Identify the data or functionality you want to display or perform within your theme file.
  2. Find the appropriate template tag that corresponds to the desired data or functionality. For example, "the_title()" tag displays the title of the current post.
  3. Insert the template tag into your theme file by writing .
  4. Save the theme file and reload your website to see the result of the template tag.


It is important to note that template tags are specific to the WordPress loop, which controls the display of posts, pages, and other content. Template tags are typically used within the loop or in specific theme files like header.php, footer.php, or sidebar.php. However, some template tags can be used outside the loop as well.


There are numerous template tags available in WordPress to display various types of content, such as titles, dates, categories, tags, excerpts, images, and more. WordPress also provides template tags for navigation menus, post pagination, comments, and other functionality.


The WordPress Codex, official documentation for WordPress, provides a comprehensive list of available template tags along with their description and usage examples. It is recommended to refer to the Codex or use reputable online resources for accurate information about specific template tags and their usage.


How to create a custom archive page in WordPress?

To create a custom archive page in WordPress, follow these steps:

  1. Log in to your WordPress dashboard and go to "Appearance" > "Theme Editor".
  2. In the right-hand side files list, locate and click on "archive.php" or "index.php" file to open it for editing. If these files don't exist, you can create a new file using a text editor and save it as "archive.php".
  3. To start customizing, you can copy and paste the code from the existing archive.php or index.php file into your new archive.php file.
  4. Customize the HTML structure as per your requirement. You can add your own headers, footers, or any other elements specific to your archive page.
  5. To retrieve the archive content, you'll need to add the following WordPress loop code within your customized HTML structure:

    ' . get_the_author() . '' ); } elseif ( is_day() ) { printf( __( 'Day: %s', 'textdomain' ), '' . get_the_date() . '' ); } elseif ( is_month() ) { printf( __( 'Month: %s', 'textdomain' ), '' . get_the_date( _x( 'F Y', 'monthly archives date format', 'textdomain' ) ) . '' ); } elseif ( is_year() ) { printf( __( 'Year: %s', 'textdomain' ), '' . get_the_date( _x( 'Y', 'yearly archives date format', 'textdomain' ) ) . '' ); } else { _e( 'Archives', 'textdomain' ); } ?>

    Customize the content within the section to display the desired information.
  6. Save the changes made to the archive.php file.
  7. To apply the custom archive page, you should create a new page in WordPress. Go to "Pages" > "Add New" and give it a title like "Archive". Leave the content area blank.
  8. In the Page Attributes section on the right sidebar, select "Archive" as the template under the "Template" dropdown.
  9. Publish the page.


Now, when you visit the page you created in step 7, it should display your custom archive page with the modified HTML structure and content.


How to create a blog page in WordPress?

  1. Firstly, login to your WordPress admin panel.
  2. Go to the "Pages" section, click on "Add New" to create a new page.
  3. Give a title to your page, for example, "Blog" or "News."
  4. In the page content area, you can add some introductory text or any other desired content for your blog page.
  5. Once you have added the desired content, click on the "Publish" button to save the page.
  6. Now, navigate to the "Settings" section and click on "Reading."
  7. In the "Your homepage displays" section, select the "A static page" option.
  8. In the "Posts page" drop-down menu, choose the page you just created, which should be labeled "Blog" or similar.
  9. Click on the "Save Changes" button to save the settings.
  10. You have now successfully created a blog page in WordPress that will display your posts. You can further customize the appearance and layout of the blog page using WordPress themes and plugins.


What is the purpose of the style.css file in a WordPress theme?

The style.css file in a WordPress theme is responsible for controlling the overall appearance and design of the website. It contains the cascading style sheet (CSS) code that defines various aspects of the theme, such as font sizes, colors, layout, positioning, and other visual elements.


The purpose of the style.css file is to provide a centralized location where all the styling rules for the theme can be defined. It ensures consistency in the design across different pages and elements of the website. By making modifications to this file, developers and designers can customize the visual aspects of the theme and create a unique and cohesive look for the website.


Additionally, WordPress recognizes the style.css file as the main file of the theme. It contains information like the theme name, author, version, description, and other metadata, which is used by WordPress to identify and display the theme correctly within the admin dashboard.

Facebook Twitter LinkedIn Whatsapp Pocket

Related Posts:

To delete a WordPress theme, follow these steps:Log in to your WordPress admin dashboard.Go to the "Appearance" section and click on "Themes."You will see a list of all the installed themes on your website. Locate the theme you want to delete.H...
To add JavaScript to a WordPress theme, you can follow these steps:First, navigate to your WordPress dashboard and go to the "Appearance" section. From there, click on "Editor" under the "Theme" category.Next, locate the "theme-name...
Do you wish to delete a WordPress theme however are fearful that it is likely to be unsafe? When you’ve got not too long ago switched your WordPress theme, then you could wish to delete the previous one. You might also have a number of different WordPress the...
Vue.js is a progressive JavaScript framework used for building user interfaces. It can be integrated with WordPress to enhance and customize the front-end of WordPress websites. Here, we'll discuss how to use Vue.js with WordPress.Set up WordPress: Install...
To block unused URLs in a WordPress theme, you can follow these steps:Open your WordPress dashboard and navigate to the theme editor. This can be found under Appearance > Theme Editor.In the right-hand column, you will see a list of template files used by y...
New Theme: Twenty Twenty Meet Twenty Twenty, the model new WordPress default theme. Danny Dudzic We’re happy to announce that Twenty Twenty — the brand new WordPress default theme designed by Anders Norén— is on the market to all WordPress.com websites. Twenty...