{"id":3040,"date":"2013-12-19T15:29:02","date_gmt":"2013-12-19T15:29:02","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/12\/19\/edit-template-2\/"},"modified":"2024-08-22T13:27:57","modified_gmt":"2024-08-22T17:27:57","slug":"edit-joomla-3-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/","title":{"rendered":"How to Edit a Joomla 3 Template"},"content":{"rendered":"

Much like Joomla 2.5<\/a>, the Joomla 3.x series includes a template editor<\/strong> available within the admin dashboard. The template editor allows you to edit your template directly within your browser. This is helpful and sometimes more efficient than editing files using ftp<\/a> or another method.<\/p>\n\n\n\n

In this tutorial, we will walk you through the steps of editing a template file in Joomla 3.<\/p>\n\n\n\n

Please note!<\/strong> This tutorial walks you through the steps of editing template files. Before editing any template file, we recommend that you first make a backup<\/a> of the original file.<\/a><\/p>\n\n\n\n

Joomla 3.0<\/h2>\n\n\n\n
    \n
  1. Log into your Joomla admin dashboard<\/a>.<\/li>\n\n\n\n
  2. In the top menu, click Extensions<\/strong> and then click Template Manager<\/strong><\/li>\n\n\n\n
  3. In the left menu, click Templates<\/strong><\/li>\n\n\n\n
  4. You will see a listing of templates you have installed. Find the template you want to edit, and then click the Template<\/em> Details and Files<\/strong> link.<\/li>\n\n\n\n
  5. Click the file you want to edit<\/strong>\n

    You are now on the Customise Template<\/em> page. The left menu of the page shows Template Master Files<\/em> and in the right menu it says Stylesheets<\/em>. Click any of the files in those two lists to edit the corresponding file. Below is a list of the files that you can edit:<\/p>\n

    Edit main page template<\/em>: index.php<\/strong>
    Edit error page template<\/em>: error.php<\/strong>
    Edit print view template<\/em>: component.php<\/strong>
    Edit css\/template.css<\/em>: css\/template.css<\/strong><\/p>\n<\/li>\n\n\n\n

  6. Edit the file and then click Save<\/strong>

    After clicking one of the above files, you\u2019ll be brought to the Template Manager: Edit File<\/em> page. On this page you will see an editor that you can use to edit the code of the file you chose. Make the changes you wish, and then click the Save<\/strong> button in the top menu. Congratulations, you just edited your template!<\/p> \n<\/li>\n<\/ol>\n\n\n\n

    Results of our Joomla 3.0 testing<\/h2>\n\n\n\n

    In our testing, we were working with Protostar Details and Files<\/strong> and chose the Edit main page template<\/strong> option. Under the opening of the body tag, we added the following text:<\/p>\n\n\n\n

    <\/path><\/path><\/svg><\/span>
    <<\/span>h1<\/span>>Look, I edited my template!<\/<\/span>h1<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Below you can see screenshots showing where we made the edit, and how it changed our template:<\/p>\n\n\n\n
    Making changes in the template editor<\/th>Viewing the changes we saved<\/th><\/tr><\/thead>
    \"Make<\/a> 
    <\/div><\/td>
    		\"View<\/a> 
    <\/div><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Joomla 3.1<\/h2>\n\n\n\n
    The steps for editing a template in Joomla 3.1 are the same as they are in Joomla 3.0.<\/p>\n\n\n\n
    Joomla 3.2<\/h2>\n\n\n\n
      \n
    1. Log into your Joomla admin dashboard.<\/li>\n\n\n\n
    2. In the top menu, click Extensions<\/strong> and then click Template Manager<\/strong>.<\/li>\n\n\n\n
    3. In the left menu, click Templates<\/strong>.<\/li>\n\n\n\n
    4. You will see a listing of templates you have installed. Find the template you want to edit, and then click the Template<\/em> Details and Files<\/strong> link.<\/li>\n\n\n\n
    5. Click the file you want to edit.
      By default, the Editor<\/em> tab is shown. In the left menu, you will see a listing of files and folders for the template you chose. Click the name of the file you want to edit.<\/p><\/li>\n\n\n\n
    6. Edit the file and click the Save<\/strong> button.
      After clicking a file name, you will see an editor showing the code within that file. Make the changes you wish, and then click the Save<\/strong> button towards the top left of the page.<\/p> <\/li>\n<\/ol>\n\n\n\n
      Results of our Joomla 3.2 testing<\/h3>\n\n\n\n
      In our testing, we edited the index.php file. Under the opening of the body tag, we added the following text:<\/p>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      <<\/span>h1<\/span>>I edited my template!!!!<\/<\/span>h1<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      As you can see in the screenshots below, after saving the changes and going to our website, we can see the change that were made.<\/p>\n\n\n\n
      Making changes in the editor<\/th>Reviewing the results of the change<\/th><\/tr><\/thead>
      \"Make<\/a> 
      <\/div><\/td>
      		\"View<\/a> 
      <\/div><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Changelog<\/h2>\n\n\n\n
      Joomla 3.0 to Joomla 3.2<\/h3>\n\n\n\n
      The biggest change in the template editor feature between Joomla 3.0 and Joomla 3.2 is the access to which files you can edit. In Joomla 3.0 you are by default limited to editing only the index.php<\/em>, error.php<\/em>, component.php<\/em>, and css\/template.css<\/em> files. In Joomla 3.2 you actually have access to all of the template files. You can navigate and choose which files to edit using a file manager (pointed out in the screenshot below).<\/p>\n\n\n\n
      \"3.0<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
      Much like Joomla 2.5, the Joomla 3.x series includes a template editor available within the admin dashboard. The template editor allows you to edit your template directly within your browser. This is helpful and sometimes more efficient than editing files using ftp or another method. In this tutorial, we will walk you through the steps Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,94],"tags":[4404],"class_list":["post-3040","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nHow to Edit a Joomla 3 Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Edit a Joomla 3 Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-12-19T15:29:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-22T17:27:57+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to Edit a Joomla 3 Template\",\"datePublished\":\"2013-12-19T15:29:02+00:00\",\"dateModified\":\"2024-08-22T17:27:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\"},\"wordCount\":652,\"commentCount\":30,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\",\"name\":\"How to Edit a Joomla 3 Template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2013-12-19T15:29:02+00:00\",\"dateModified\":\"2024-08-22T17:27:57+00:00\",\"description\":\"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Edit a Joomla 3 Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Edit a Joomla 3 Template | InMotion Hosting","description":"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/","og_locale":"en_US","og_type":"article","og_title":"How to Edit a Joomla 3 Template | InMotion Hosting","og_description":"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-12-19T15:29:02+00:00","article_modified_time":"2024-08-22T17:27:57+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to Edit a Joomla 3 Template","datePublished":"2013-12-19T15:29:02+00:00","dateModified":"2024-08-22T17:27:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/"},"wordCount":652,"commentCount":30,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/","name":"How to Edit a Joomla 3 Template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2013-12-19T15:29:02+00:00","dateModified":"2024-08-22T17:27:57+00:00","description":"Using the template editor in Joomla 3 may be the most efficient way for you to edit your Joomla template files.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/edit-joomla-3-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Edit a Joomla 3 Template"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4403,"name":"Joomla","slug":"joomla","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=3040"}],"version-history":[{"count":8,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3040\/revisions"}],"predecessor-version":[{"id":128631,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3040\/revisions\/128631"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=3040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=3040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=3040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}