{"id":56323,"date":"2023-01-06T23:01:48","date_gmt":"2023-01-06T17:31:48","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56323"},"modified":"2023-01-22T23:12:50","modified_gmt":"2023-01-22T17:42:50","slug":"steps-of-creating-drupal-theme","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/steps-of-creating-drupal-theme\/","title":{"rendered":"Steps of creating Drupal theme"},"content":{"rendered":"

Introduction<\/span><\/h2>\n

A theme is a collection of files that implements the look of the site. They simply implement the HTML, the CSS, and JavaScript that will be making our site unique. They also consist of a bit of simple logic that is used to make our website reuse or switch markup in different cases.<\/span><\/p>\n

STEP 1<\/strong><\/span><\/span><\/p>\n

First, we need to create a custom theme under the \u2018web\/themes\/custom folder. We will name the folder as vetenary (say). You can put any name but in my case, I take it vetenary .<\/span><\/p>\n

\"\"<\/b><\/span><\/span><\/span><\/strong><\/p>\n

 <\/p>\n

STEP 2<\/strong><\/span><\/p>\n

Next, we will need to create an info.yml file. We need to specify the primary keys for it.<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

STEP 3<\/strong><\/span><\/span><\/p>\n

We have to make CSS and JS folder under which we have to place all our CSS and JS files.<\/span><\/p>\n

STEP 4<\/strong><\/span><\/p>\n

In step 3, we have to create a libraries.yml file to specify all the libraries we need for our custom theme. We will also create CSS and JS directory and its files to link it here.<\/span><\/p>\n

\"\"<\/p>\n

Note: We have to give 2 spaces before the version, CSS and js, and 4 spaces before the theme.<\/span><\/p>\n

STEP 5<\/strong><\/span><\/p>\n

After creating the libraries.yml file, we need to link it to our theme. For this, we will add it to the info.yml file which will then apply to the whole theme.<\/span><\/p>\n

\"\"<\/p>\n

Note – The key will be libraries and the rule for defining the path of the theme – \u2018vetenary\u2019 \/ library name -\u2018global-styling\u2019.<\/span><\/p>\n

STEP 6<\/span><\/strong><\/span><\/p>\n

In this step, we will define the regions for our theme. In info.yml, we have to define it under the \u2018regions\u2019 key.<\/span><\/p>\n

\"\"<\/p>\n

STEP 7<\/strong><\/span><\/p>\n

Now we have to create a folder name as a template under which we have to place our twig files.<\/p>\n

\"\"<\/span><\/span><\/span><\/strong><\/p>\n

Inside the template folder, we have to override our page.html.twig.<\/p>\n

\"\"<\/p>\n

STEP 8<\/strong><\/span><\/p>\n

Now Go to Appearance in your Drupal site. You can see your custom Drupal theme present in the Uninstalled themes section. You need to click the \u2018Install and set as the default option to install your Drupal theme on the site.<\/p>\n

\"\"<\/span><\/span><\/span><\/p>\n

Additional information<\/strong><\/span><\/p>\n

If you want to apply the screenshot to your theme, then you have to put a .png file inside your theme folder, and also want to apply the logo to your custom theme, then you have to put a logo.png file inside the theme folder.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

<\/div>","protected":false},"excerpt":{"rendered":"

Introduction A theme is a collection of files that implements the look of the site. They simply implement the HTML, the CSS, and JavaScript that will be making our site unique. They also consist of a bit of simple logic that is used to make our website reuse or switch markup in different cases. STEP […]<\/p>\n","protected":false},"author":1510,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":9},"categories":[3602],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56323"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1510"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56323"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56323\/revisions"}],"predecessor-version":[{"id":56465,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56323\/revisions\/56465"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}