{"id":4961,"date":"2022-08-02T17:45:50","date_gmt":"2022-08-02T14:45:50","guid":{"rendered":"https:\/\/www.scalahosting.com\/kb\/?p=4961"},"modified":"2023-03-01T16:38:47","modified_gmt":"2023-03-01T14:38:47","slug":"how-do-you-edit-joomla-template-code","status":"publish","type":"post","link":"https:\/\/www.scalahosting.com\/kb\/how-do-you-edit-joomla-template-code\/","title":{"rendered":"How Do You Edit Joomla Template Code?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In the past, <strong>editing the Joomla template code<\/strong> required complex maneuvers with<strong> File Transfer Protocol<\/strong>. Nowadays, you can perform backend changes to the code right from your Joomla dashboard. You can customize your content, menus, and modules simply by editing some code in the template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide takes you through <strong>accessing your Joomla template editor<\/strong> and how to customize your templates safely.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"How-to-Access-Your-Joomla-Template-Manager\">How to Access Your Joomla Template Manager<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Login to your <strong>Joomla<\/strong> admin dashboard.<\/li>\n\n\n\n<li>From either the navigation menu at the top or from the left sidebar menu, click \u2192 <strong>Extensions<\/strong> \u2192 <strong>Templates. <\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/5G1-OIPKKnj_H5sYWyirLFRCPrFkIZ80dVhg9aECdhSpcUxGIKgz9lFNEq0xi7t8fv17faBSSODk_KG_n3MVmIvuC07GO3zgIe7V1MMe7cUhvpdv8NCMutyppRWzvtT4oCGGLo-nc382mVITz6QT9w\" alt=\"\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Find the template you want to edit, and then click on the template name.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">From here, you can see the files in the left-side menu for <strong>CSS, <\/strong><a href=\"https:\/\/www.scalahosting.com\/kb\/how-to-create-an-html-sitemap-page-for-wordpress\/\"><strong>HTML<\/strong><\/a><strong>, PHP<\/strong>, etc. <\/p>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/3CPypUDpjC8w9ZQ2eM-B4wraWo3ecRWOt4g4OStYh560J4RHMspNArOhZRVpuHXOmGrcHUA22D-IisWeulkbq_Hc_WKMY7CWFemUrXSfc8Cf_WJ39xhFA347Yvnjk6xYShoVOk-XNk85MHQH_hKXPg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Be careful when making changes to the code because doing something wrong could break the template.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a precaution, it\u2019s wise <strong>to create a backup of the code you will change<\/strong> \u2014 just in case anything goes wrong.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Create-Template-Code-Backup\">Create Template Code Backup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on<strong> the file that you want to change<\/strong>. You&#8217;ll see the code that controls your template&#8217;s output display to the right.&nbsp;<\/li>\n\n\n\n<li><strong>Select all the code<\/strong>, copy it into a text editor, and then save the file somewhere safe.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you can <strong>recover the original code simply by pasting the saved file<\/strong> into the code box, let\u2019s make some changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Make-Changes-to-Your-Site-Layout\">Make Changes to Your Site\u2019s Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can make changes to the layout of the Joomla site with the index.php file.&nbsp; When you open the index.php file and the code displays to the right, you can <strong>see the various sections in the code for headings, the body text, <\/strong>and so on.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Custom-Doc-Presentation\">Custom Doc Presentation By Changing the CSS File<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to change individual parts of the template\u2019s content, you can look for them in <strong>the CSS file<\/strong>. Most of the time, Joomla designers put all the most essential code into template.css.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the template you want to modify and <strong>locate the CSS file <\/strong>in the left-side menu. You can add or change any headings, text, and content layout from here.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can do the same with other code files too \u2013 as long as you know what you\u2019re doing.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on any of the code files to open.&nbsp;<\/li>\n\n\n\n<li>Edit the file.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/tOkDqMxgvuyxuQ6gFHak5L1D6WhKC2gH2Fme0P6aV5uxNil8lod1R-q0ItMTSMqm2jXy2rhH64dNBeMjQWksyT248AxqY2DopbZB9ZU1vy2DCY-hYoYThpvHZ7phwqqOpntujfOuQapiUDFZAIAHmQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Other-Joomla-Editor-Commands\">Other Joomla Editor Commands<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we know <strong>how to edit any Joomla template code<\/strong>, we can go over some other controls available in the<strong> Template Manager<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Create-a-New-File\">Create a New File<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>New File<\/strong> \u2192 <strong>Add File<\/strong>. A window will open.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/VL6TW3_k2fIA554JXskD4ZcaZHxPf1tl94YErn7pkM2VB_qec8oLl22BuuIZEhKdBbAF7EwvA4A0scjM_lB_BtTUoTtIVKMz6gFFcwh9GN1ykFoTwP30yhPcpYoqCJpdbs1wXIa8e3ykU7oDZ3mk2A\" alt=\"\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter a <strong>File Name<\/strong> of your choice. (Something relevant)<\/li>\n\n\n\n<li>Select the <strong>File Type<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>Create<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Rename-File\"><strong>Rename File&nbsp;<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the file you want to rename.<\/li>\n\n\n\n<li>Click the <strong>Rename<\/strong> button.&nbsp;<\/li>\n\n\n\n<li>Add a new name.<\/li>\n\n\n\n<li>Click <strong>Rename<\/strong> button.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Delete-Files\"><strong>Delete Files&nbsp;<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the file you want to delete.<\/li>\n\n\n\n<li>Click <strong>Delete \u2192 Delete<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Add\/Delete-a-Folder\"><strong>Add\/Delete a Folder&nbsp;<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Manager Folders. <\/strong>A window will pop up.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/rqDmcz9ncc1fbUGyn0fP3LIavwjL4JNgaCADKp66IC-iIx9dxHUDriWGeGnKzBnKCZ3657IvvKnctyJkw3HsOC17sraWCfDnvLZs2Ih3SIREHC1gPFpC0446wmPiNeRAcPrX7JUUTuBqQeinMh9C8Q\" alt=\"\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter a <strong>Folder Name<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Click the <strong>Create<\/strong> button.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Copy-Template\"><strong>Copy Template&nbsp;<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <strong>Copy Template.<\/strong> A window will open.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image mpg-gallery\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/wGAnROBijHxpyVSAxZvXL1aw3nSiWyvafhH695q3ScndajvJ84kUPm1WpJx3PHJKfVeRrGVh8eMRKIpR_WBgHngW3cJJRe-cejmbdMROyIwqaCfKG0gJh-XQSxo8KTDexq3BMFlUkFVEJCJX4qRRvw\" alt=\"\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Enter a <strong>New Template Name<\/strong>.<\/li>\n\n\n\n<li>Press <strong>Copy Template.<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"See-Template-Preview\">See Template Preview<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>Template Preview<\/strong> button, which will give you a preview in a modal window.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! You can now edit code in any <a href=\"https:\/\/www.scalahosting.com\/blog\/where-can-i-find-free-joomla-templates\/\"><strong>Joomla template<\/strong><\/a> for a custom design.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You may run into problems at times, but fortunately, you have backups saved in a safe place. To overcome some of the issues, <strong>Joomla has a long-standing community forum <\/strong>where you can find answers to most anything.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re looking for a more <strong>hands-off<\/strong> and <strong>highly-optimized Joomla experience<\/strong>, you could check out ScalaHosting. They\u2019re practically Joomla nerds.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On top of that, they offer <strong>lightning-speed virtual private servers<\/strong>, <strong>highly knowledgeable<\/strong> <strong>and responsive customer service<\/strong>, and <strong>24\/7<\/strong> <strong>comprehensive security<\/strong>.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Contact their team to learn more about affordable <\/strong><a href=\"https:\/\/www.scalahosting.com\/blog\/how-to-choose-best-web-hosting-plan-for-my-website\/\"><strong>web hosting packages<\/strong><\/a> that make you question why you haven\u2019t found out about them until now.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the past, editing the Joomla template code required complex maneuvers with File Transfer Protocol. Nowadays, you can perform backend changes to the code right from your Joomla dashboard. You can customize your content, menus, and modules simply by editing some code in the template. This guide takes you through accessing your Joomla template editor [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5392,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"categories":[69],"tags":[],"class_list":["post-4961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-joomla-hosting"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/comments?post=4961"}],"version-history":[{"count":7,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4961\/revisions"}],"predecessor-version":[{"id":5415,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4961\/revisions\/5415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/media\/5392"}],"wp:attachment":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/media?parent=4961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/categories?post=4961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/tags?post=4961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}