Categories
WordPress

WordPress – How to Create a Child Theme?

In this post today I will discus, How to Create a Child Theme? Every new developer first need to learn the WordPress basics. Also need to know how customize your WordPress site. Create new child themes is great starting point for developer to customize WordPress themes.

Why Developer Need to Create a Child Theme?

Child themes are considered the best way to customize or extend function your WordPress default or paid themes. A child theme inherits all the features and appearance of its parent theme. Developer can customize without affecting parent theme function.

This allows a developer to easily update parent theme function without losing parent theme new changes. Developer can easily update update parent theme if release new version for parent theme.

Developer Basic Requirements

A developer need to understanding of CSS/HTML/PHP basic, so a developer can make easily own changes. If developer is good at copying and pasting code snippets from other sources, then that would work too. I am recommend a developer to practice on local development environment. Developer can move all local change to live WordPress site. Because on local server developer can dummy content for testing purposes to child theme development.

Creating Your First Child Theme

Now you can chose one of the default WordPress theme can be used as a parent theme. Example: twentytwenty Developer need to open /wp-content/themes/ in your WordPress installation directory and create a new directory (twentytwenty-child) for your child theme. You can name this directory anything you want but good format is like (twentytwenty-child) name.

wordpress-create-child-theme-directory

Go to /wp-content/themes/twentytwenty-child/ directory and create stylesheet file named (style.css) and open with text editor like Notepad or VSCode and your stylesheet must contain the below required header comment at the very top of the file.

Following information is required for child theme:
Theme Name: Needs to be unique to your theme name.
Template: The name of the parent theme directory. The parent theme in our example is the Twenty Twenty theme, so the Template will be twentytwenty. The parent theme folder name is case-sensitive. If you provide with Template – TwentyTwenty, then it will not work.

Now developer need to something change on functions.php file, it’s necessary to add parent theme styles by (parent-style) on child theme and custom stylesheet called by (child-style).

Now developer need to something change on functions.php file, If you want to set logo without cropping logo. Login into wp-admin and go to Appearance => Customize after than click on “Site Identity” try to change logo, select a logo and press Skip Cropping button with following code.

wordpress-create-child-theme-cropping

Activate child theme:

Child theme is ready for active. Please go to WordPress admin and go to menu Appearance => Themes you can find new theme “Twenty Twenty Child” mouse over on new theme and click on “Active” button.

wordpress-create-child-theme-active

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 – Create custom Theme step by step

Create Magento 2 custom Theme step by step process. In Magento 2 has by default Luma and Blank themes – that you can see after installing Magento 2 successfully. Magento 2 default demonstration theme is Luma theme, and Blank is basis for custom theme creation.

We can create custom theme by call parent Luma or Blank theme. In this article I will discus create new theme by Luma parent theme.

Theme Folder and Files structure

To create a theme directory for your Magento 2, you need to go: app/design/frontend directory. Under frontend directory, create a new directory according to your theme vendor name: app/design/frontend/Extendfeature directory, I have choose Extendfeature for my theme vendor name under your theme vendor directory, create a directory for your Magento 2 theme: app/design/frontend/Extendfeature/ultimate I have choose ultimate for my theme name directory.

After creating files and folder structure, we need to declare name/title your Magento 2 theme, So that Magento knows it exists and we can set your theme as the current store theme in your Magento 2 backend.

Declare your Magento 2 theme

Now you need to create the theme.xml file under app/design/frontend/Extendfeature/ultimate/ directory and use the code below:

In <title> tag enter the name of your theme, and in the <parent> tag you can specify parent theme for fallback purposes. I am using the Luma theme. In the <preview_image> tag I declare a theme preview image.

Make Your Theme a Composer package

PHP dependency management tool is composer. it allows declare the libraries your project depends on and composer will manage install/update them for you and distribute theme as a package, we need to add a composer.json file to the theme directory.

Register your Magento 2 Custom theme

Add registration.php to register your Magento 2 Custom theme in your theme directory: app/design/frontend/Extendfeature/ultimate/registration.php and add the following content in your registration.php file.

Creating web static files, folders

For theme design view, we need to many static files such as javascript, css, images and fonts. Magento 2 are stored in separate folders in web of theme package.

Here are the structure

Configure storefront images size

Copy the view.xml file from the vendor/magento/theme-frontend-luma/etc directory of an existing theme (for example, from the Luma theme) to your theme app/design/frontend/Extendfeature/ultimate/etc directory. And let update the image configuration for storefront catalog product grid and others template page.

Configure Magento 2 Custom Theme via Admin panel

Run following commands and check your newly created theme is working.

After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your magento store. Login into Magento 2 admin panel, then go to Content > Design > Themes. And make your sure your theme title appears on this list.

Custom Theme in theme list

Theme Configuration, When you can see your theme in this list, go to Content > Design > Configuration, select your newly created theme from those shown in the image below. After change your theme, click on “Save Config” button.

Theme configuration add theme

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE