Creating a custom WordPress theme from scratch is no small feat. However, the process might not be as difficult as you have previously imagined. By breaking the process down into stages and using the information on the Codex documentation site, pretty much anyone can create a new theme. Custom themes aren’t created by us at WordPress.com, so we are not specialized in exactly how your custom theme works. Custom themes may require additional setup after uploading and activating the theme. Since every custom theme is different, it’s best to check your theme’s specific instructions for how to finish setting it up. WordPress themes are made up of multiple template files that are all contained in a theme folder. When the index.php file is loaded, PHP tags within this file load other template files, such as the header, sidebar and footer to build a complete page.

1. Creating a Custom WordPress Theme for Beginners Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you would need to have a decent understanding of all these web design languages or hire a web developer to create a custom WordPress theme.
2. Find the perfect theme for your WordPress website. Choose from thousands of stunning designs with a wide variety of features and customization options.

Themes »Uploading & Setting Up Custom Themes

In addition to the hundreds of themes on WordPress.com, our Business and eCommerce plans allow you to upload your own custom theme. This can be useful if you’ve purchased a theme from elsewhere and want to use it on your WordPress.com site.

Quick Steps
Download the Theme’s .zip File
Upload the Theme
Preview or Activate the Theme
Setting up your Custom Theme
Custom Themes and Demo Content
Where to Find Custom Themes

Quick Steps

1. Download the theme’s .zip file.
2. Go to My Site(s) → Appearance → Themes.
3. Select Install Theme.
4. Preview or activate the theme.

Download the Theme's .zip File

Start by downloading the theme’s .zip file from wherever you purchased the theme.

If you’re creating your own custom theme, you’ll need to save it as a .zip file.

For themes purchased through Themeforest, you must choose the Installable WordPress file only option when downloading the theme.

Upload the Theme

To upload a custom theme, go to My Sites → Appearance → Themes in your site’s dashboard.

Click Install Theme.

Drag the theme’s .zip file into the box. Alternatively, you can click the box, locate the theme’s .zip file on your computer and double click it.

Preview or Activate the Theme

If you’re ready to start using the theme right away, click Activate.

To preview the theme before activating it, click Try & Customize to see a live preview in the Customizer.

You can adjust your site settings and theme options from the Customizer.

Click Save & Activate when you’re done adjusting the settings and ready to activate the theme.

Setting up your Custom Theme

Custom themes aren’t created by us at WordPress.com, so we are not specialized in exactly how your custom theme works.

Custom themes may require additional setup after uploading and activating the theme.

Since every custom theme is different, it’s best to check your theme’s specific instructions for how to finish setting it up.

A good place to check for additional theme setup options is in the Customizer. You can access the Customizer by going to .

If you can’t find your custom theme’s instructions or aren’t sure how to finish setting up your custom theme, we recommend contacting the theme’s support team. They’ll be the most familiar with the theme and in the best position to help you out.

Depending on your theme, you may need to finish setting up your custom theme from the WP Admin dashboard.

Choosing a Theme

General factors you should consider when deciding on a theme include:

• how it looks
• responsive design (so that the theme looks good on all different screen sizes)
• how often the theme is updated (frequent updates are a good sign)
• a reliable theme support service to help you with bugs and questions

Something else to keep in mind is how much custom functionality is introduced by a theme. Some third-party theme authors bundle huge amounts of functionality in to their themes.

Things like custom sliders, shortcodes, widgets, layout managers and content builders are frequent inclusions. Be careful when choosing a theme like this. If you decide to switch themes at a later date, you will lose all of the custom functionality that you may have come to rely upon. This can be extremely problematic if the functionality is interwoven throughout your entire web site. Imagine you’re using a [slider] shortcode on all of your product pages. When you switch themes you would need to go through all of your products to remove instances of that shortcode – not fun at all!

Our advice would be to always look for a lightweight, lean theme and then add extra functionality via Plugins & extensions. This way, when you switch themes the functionality remains.

Where to Find Custom Themes

Ringcentral meetings mac download. If you’ve already taken a look through the WordPress.com theme showcase, but haven’t yet found the perfect personality for your site, there’s no need to worry – if you use our Business plan, you also have the ability to upload custom themes from third-party sites. Download apps from mac to iphone.

While there are a lot of theme resources and galleries available online, we’ve collected a list of some favorites below to get you started.

Theme Resources:

Remember, since these themes are developed by third-parties, it’s good to review their support options before purchasing a theme. We can help with basic questions, but the theme developers will be the best place to get ongoing support for the theme.

Custom Themes and Demo Content

• Some Custom themes may include methods to import or install demo content.
• We recommend only installing demo content via an XML File.
• If your theme did not include a demo XML file or provided demo content in a different manner, please contact the theme’s support and ask if they’re able to provide an XML file.

Versatile plans and pricing

• Free

  Best for students

• Personal

  Best for hobbyists

• Premium

  Best for freelancers

• Business

  Best for small businesses

As a Theme Developer/Designer, Do you always think of what extra could be provided to your customers/clients? Custom Theme Options! Yes, Customize your theme with WordPress Settings API and empower users with options to quickly modify its appearance. This is what you need right now and stay ahead in the game.

Custom Wordpress Theme Designer

Obviously, you want to create a WordPress theme with a wide reach and large user base. The main requirement then is to create a professional, flexible and customizable theme. Most WordPress themes provide a Theme settings page to alter its appearance and style. This page allows taking user inputs like social media handles, custom logo, homepage layout etc. There are options in the settings page to customise theme features, behavior and styles. These theme options help novice users to change the theme’s appearance without any coding effort. Since Theme Options are enhancements to a WordPress theme, they need additional code to be added to the theme. WordPress developers can add custom theme options by using the WordPress Settings API. The Settings API is an apt choice for developers to provide users with extra functionality through the custom theme options. In this tutorial, we will understand the WordPress Settings API and how theme developers can use them for adding theme options to a page.

WordPress Settings API: Creating Custom Theme Options

The WordPress Theme Options screen provides appearance settings for a theme right from the dashboard. Developers can choose what options they want to add to their theme settings. They can provide the users with the capabilities to change theme features. Developers can add a WordPress theme options page to any theme simply by modifying it’s “functions.php” file. Theme options depend on the features and customization the theme supports. However, there are some common options present in every theme settings page. These include layout options, social URLs, header logo etc.

Benefits of Custom Theme Options

The primary benefits that the custom theme options offer are:

• Easy customization for your theme: Users do not need to get into the details of directly editing the PHP or CSS files.
• Customization capabilities for a WordPress theme: This increases the theme’s extensibility, flexibility, usability, and ease of operation. Users can modify the theme’s appearance with easy to use theme options.
• Rise in Customer Satisfaction: By adding theme options for customising themes, a developer can please his customer to create a website that he desires. This leads to increase in overall customer satisfaction and theme usability from customer point-of-view.
• Keeping up with the Trends in Web Designing: Theme options help developers to provide customizations that work with the trends. Like in today’s scenario, SEO and social media sharing options are primary components of a website. Custom WordPress theme options can help integrate differently styled social media options. With added SEO options to the theme, users will not need to worry about the search engine optimisation of every WordPress blog post.

WordPress Settings API

The WordPress Settings API was added in WordPress 2.7 and is one of the most popular WordPress APIs. The Settings API allows admin pages to have fields for customising the way the WordPress theme works. The Settings API is a set of functions to support adding Custom Menus, WordPress Theme options and other Option Pages for themes. These also include API for saving, validating, and retrieving values from user input. Theme developers can use the API to add more powerful and interactive options to their themes.

Benefits of using WordPress Settings API for Theme Customization

Settings API is a convenient and secure method to add WordPress theme options and validating user inputs. The Settings API is a complete package that handles all aspects of adding admin options in WordPress. Using the Settings API involves some coding effort for the developers. However, they no longer need to work on complex debugging of the options management framework. Using the Settings API is not mandatory. Developers can still write their settings page without using this API. Nevertheless, the Settings API offers developers with several benefits that cannot be overlooked:

• Visual Consistency with WordPress UI: The settings page would look like other administrative content.
• Ease of Use for developers: The WordPress API adds lots of inbuilt support like for handling retrieving and storing of settings data.
• WordPress hardened security with extra security measures: WordPress developers get access to secure methods of sanitizing data.
• Robustness for the website: The API code is well tested and maintained making it more stable.
• Compatibility with WordPress Core: This provisions that any updates automatically handle the custom settings page.

How WordPress Settings API work

The Settings API offer the developers with complete capabilities to customise the settings page. They can register new settings pages or modify existing settings pages and register new settings or fields. Let us look at the structure of a theme setting and how developers can create and add their own settings.

Components of a Theme Setting

A theme setting that is added to the customizer screen consists of three parts:

1. Section is a collection of fields. There should be at least one field in every section on a page. You can add new sections to existing settings pages or create a whole new settings page.
2. Fields are the individual settings that you want to provide users with control to modify the values.
3. Settings are combinations of the fields and sections and are registered in the database. You need to register the setting after defining both Fields and Sections.

Adding Sections

Sections correspond to the settings that are added to the options page. These allow organizing the settings on the page.

API:add_settings_section – To define new settings sections for an admin page. Call this API from inside an initializer function in the functions.php file. In our samples, we define it inside the admin_init hook that is triggered before any other hook when a user accesses the admin area. You can use this API for as many sections that you need to define for your theme options.

Parameters

Return Value: void

Sample Code: The sample code demonstrates the use of this API to add a new section to the default “Reading” settings page. Place this code in your functions.php file for the theme.

Adding Fields to Sections

Custom Wordpress Theme Builder

Settings Fields represent the WordPress Theme Options and are part of the sections. The settings fields show as part of a section inside a settings page.

API:add_settings_field – To add settings fields to section. After you define the theme section, call this API from inside an initializer function like the admin_init hook defined in the functions.php file. You can use this API for as many settings fields that you need to define for your section.

Parameters

Note that this function takes as input the settings page slug and the section id to which the setting belongs.

Return Value: void

Sample Code: The sample code demonstrates the use of this API to add a new field to the “first_section” section of the ‘Reading’ page. Take note that the API is called from the test_custom_settings function defined earlier where we added the theme section named “first_section”.

Registering the Settings

All the settings which you set up here get stored in the options table under the key used in the register_settings () function.

API:register_setting – To Register Settings

Parameters

Return Value: void

Note that with version 4.7.0 the “args” parameter can contain an array of values. Prior to this version update, the third argument was the sanitize_callback for specifying the callback function for sanitizing the option’s value. There are also some built-in php callbacks that you can use as the sanitize callback.

Sample code:

The sample code demonstrates the use of this API for registering a test setting to the ‘Reading’ page. Call this API from inside an initializer function like the admin_init hook defined in the functions.php file.

Adding Settings to new Settings Page

We have looked at the Settings API used for adding custom settings to an existing page. We have also seen sample code to add a new setting to the ‘Reading’ page. Let us look at the API required to add and display new settings to a new theme page. Add the code to call these API to the page in functions.php file for the theme.

API: settings_fields – To display option_page fields for a settings page. Call this function from inside of the form tag for the options page.

Parameters

Return Value: void

Sample code:

The sample code demonstrates the use of this API in a new custom options page.

API: do_settings_sections – To print out all settings sections added to a settings page.

Parameters:

The page id should match the page name used in add_settings_section ().

Return Value: (void)

Sample code:

The sample code demonstrates the use of this API for displaying the settings sections for a page.

Adding Custom WordPress Theme Options with WordPress Settings API

There are two parts to adding new settings to a settings page: adding the option and registering those settings. The Options API allow creating, reading, updating and deleting WordPress options. The Settings API and the Options API work as a combination for defining custom WordPress Theme Options.

The settings in a group are present in the wp_options database table and can be retrieved for later use. The wp_options table stores the settings as key-value pairs in the database. A single key-value pair is used for a single option setting. It is recommended to use an array with a single key when the number of values is more.

There are two APIs primarily used for adding and retrieving custom theme options.

Adding a Theme Option

API: add_option – To add a named option/value pair to the options database table. It does nothing if the option already exists. Call this API from the functions.php admin_init hook where you have registered the setting using the register_setting API. Doing so will create an entry in the options database for the setting and its default value.

Parameters

Return Value:Boolean – False if the option was not added and true if the option was added.

Sample code

The sample code demonstrates the use of this API for adding a test option.

Retrieving a Theme Option

API: get_option – Retrieves an option value based on an option name. Use this API to get the default option value saved in the database or the value entered by the user in the theme setting UI. Use this API when you want to take further action based on what the user has selected. This includes changing the theme layout, adding specific features to the theme etc.

Parameters

Note that there must be a default defined for handling cases when the option does not exist.

Return Value: Boolean – False if the option does not exist or does not have a value.

Sample code

The sample code demonstrates the use of this API for retrieving the value of a test option. Include this code where you want to change the theme appearance based on what the user has selected for the theme option.

Using the WordPress Settings API to Create Custom Theme Options

Let us now look at how a developer can add a new Theme Option using the WordPress Settings API. We list the tasks and the corresponding APIs for adding a new checkbox Theme Option to a theme.

As a reference for creating a complete working example, we have also added the sample code for adding a new Menu item and page. You may change it as per requirement.

Step 1: Create a new Menu for WordPress Theme Options

Add new menu named “Theme Customization” under the Appearance Menu. The new menu opens the page “theme_options” defined in next step.

Wordpress Custom Theme Design

Output Settings Page

Step 2: Add Blank Page for new Menu

Add new blank page “theme_options” for the “Theme Customization” menu. The page title is “Custom Theme Options Page”.

Output settings page

Step 3: Add and display custom sections to new Page

Display the sections for the page. Call these APIs only after you have defined the settings and sections in the functions.php file.

Output settings page

Step 4: Add Settings Field to Section

Next, we add a settings field called “first_field_option” to the section. We also register the field and add the theme option to the options database.

Output settings page

Step 5: Retrieve the Settings Field value

Let us now see how to retrieve and use the value of the settings field option. We modify the settings field display callback to set the initial value of a checkbox field. We use the get_option API to retrieve the value of the option from the database.

In the sample code below, the value of the checkbox is set according to the value saved in the database. If the user checks the checkbox and submits the changes, then next time when he opens the “Theme Customization” tab, the checkbox will be checked as per value saved in the database.

Output settings page

Sample Illustrations Demonstrating Theme Options

The Settings API allows adding various types of settings to the Appearance Menu. Below we show two more examples for adding a text box setting and a file name input setting to the sample page.

Example 1: Add a Textbox for Reading Social URLs

We will modify the above code for adding an option to read the twitter handle of the user. Add below code to the function test_theme_settings function defined above in the functions.php file.

Now add the callback for the settings field added.

Output settings page

Let us now see how the values can be used inside of the page display code. Let us assume we enter the URL “http://xyz.com” as the twitter URL in the setting “Test Twitter Profile URL” as shown below.

Now we need to use this value in our page display code. For our theme we add the code to the index.php file for the theme. You can add it in your theme with the code where you display the page. So, we add the following lines to the index.php inside the footer section of the page.

When we load a page created in our theme we see that the footer shows the twitter URL “http://xyz.com” that we entered in our settings page.

Example 2: Add File Upload Option for Logo Image

We will now modify the above code for adding an option to get file name input for adding a logo file. Add below code to the function test_theme_settings defined above in the functions.php file.

Now we define the callback for the settings field added.

Output settings page

You can use the get_option API to use the settings value for logo file and display the logo. The code would be similar to what is shown in the previous example.

Getting More with Settings API and WordPress Theme Options

The Settings API are easy to use and you can use them to create a customised settings page for your theme. It is important to plan the functionality you want to add to the page. You should also plan how you want to organize it on the settings page. You need to plan for the display options like Header, Footer etc. and the social options like Twitter, Facebook, Google Analytics etc. The Settings API provide you with the means to incorporate these custom theme options to your theme. The Settings API provide a lot of features but require a lot of coding effort and experience with coding and debugging. If you are a beginner and not too comfortable with all this code then you can skip all these coding steps by using the TemplateToaster software.

TemplateToaster for Creating Custom Theme Options and Themes

The TemplateToaster tool helps you make things work faster since TemplateToaster themes already have inbuilt theme options. The WordPress Settings API is already used in the TemplateToaster software. You do not need to manually configure the API for adding WordPress theme options. You can add these options directly in the theme as convenient options for the client. They can simply use these options from WordPress admin panel without any extra plugin or coding for these options.

In the Theme Options settings screen from TemplateToaster, we see that there are multiple categories of settings already supported. These include – header, Sidebar, Footer, Colours, SEO, Google Map etc.

Each option is further divided into sub-categories specific to the option. For the SEO options below, we see multiple sub-options like – SEO Enable, SEO General, and Web/Social etc.

If you need to add some more theme options, you don’t need to get into the details of the Settings API. Custom menus can be directly added as custom theme options for themes built with TemplateToaster, a WordPress website Builder and WordPress theme builder which allows you to directly add required function for the specific theme-options-menu section, in the theme’s functions.php file.

The options supported by TemplateToaster website maker are many and cover all the commonly used WordPress theme options. Novice developers and those working under strict time constraints can switch to using TemplateToaster tool for all their theme design needs.