{"id":1846,"date":"2012-10-07T20:59:28","date_gmt":"2012-10-07T20:59:28","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/10\/07\/add-css-and-js\/"},"modified":"2021-08-16T23:34:16","modified_gmt":"2021-08-17T03:34:16","slug":"add-css-and-js","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/","title":{"rendered":"How to Include CSS and Javascript files in a Joomla 3.1 Template"},"content":{"rendered":"

\"new<\/a><\/p>\n

<\/div>\n

If you\u2019ve been following along in our tutorials series on creating Joomla 3.0 templates, you would have seen in our last tutorial after changing site templates<\/a> that the template does not look very nice at all (see screenshot to the right).<\/p>\n

The reason the template looks a mess is because the CSS file that we created is not being called correctly, and is actually resulting in a 404 error.<\/p>\n

In this tutorial we will show you how to properly include CSS and JS files within a Joomla 3.0 template<\/strong>.<\/p>\n

<\/div>\n

Before we Begin: Background information<\/h2>\n

In our template, we have two files that we want to include:<\/p>\n

    \n
  1. css\/style.css<\/li>\n
  2. js\/main.js<\/li>\n<\/ol>\n

    We will be updating our template\u2019s index.php file to include these files. As the template is already installed on the server and we are technically not adding any files to it (because the style.css and main.js files are already on the server), we will update the template file directly on the server. This will save us time as we don\u2019t need to edit the files on our desktop and then reinstall the template to see the changes.<\/p>\n

    Adding CSS and JS Files to a Joomla 3.0 Template<\/h2>\n
      \n
    1. Open for edit your index.php file<\/strong>As our template\u2019s index.php file is already on our Joomla Hosting<\/a> account, we are going to use the file manager within our cPanel to edit the file.<\/li>\n
    2. Use $doc->addStyleSheet and $doc->addScript to include files<\/strong>At the top of your template, use $doc->addStyleSheet<\/strong> to include your css\/style.css<\/em> file and $doc->addScript<\/strong> to add your js\/main.js<\/em> files. For these functions to work, we must also add $doc = JFactory::getDocument()<\/strong>. So far, we\u2019ve updated the top portion of our index.php file, and the code in green below shows those changes.\n
      <?php\n\n$doc = JFactory::getDocument();\n\n$doc->addStyleSheet('templates\/' . $this->template . '\/css\/style.css');\n$doc->addScript('\/templates\/' . $this->template . '\/js\/main.js', 'text\/javascript');\n\n?><\/strong><\/span> \n\n<!DOCTYPE html>\n<html>\n\n<head>\n<\/pre>\n<\/li>\n
    3. Remove the previous calls to include these files<\/strong>Within our head tag, we previously included css\/style.css and js\/main.js. We are now going to remove these two lines of code, which you can see below crossed through.\n
      <!DOCTYPE html>\n<html>\n\n<head>\n\n    <link rel=\"stylesheet\" href=\"css\/style.css\" type=\"text\/css\" \/>\n    <script src=\"js\/main.js\" type=\"text\/javascript\"><\/script><\/span><\/strong><\/span>\n\n<\/head>\n\n<body><\/pre>\n<\/li>\n
    4. Add <\/jdoc:include> within your head tag<\/strong>The next thing you\u2019ll need to do is use <\/jdoc:include> to programmatically print code within your header. Basically what this will do is add the necessary HTML within your head tag to include the CSS and Javascript files.The example code below shows what the top of our index.php file looks like after performing all the steps in this article:\n
      <?php\n\n$doc = JFactory::getDocument();\n\n$doc->addStyleSheet('templates\/' . $this->template . '\/css\/style.css');\n$doc->addScript('\/templates\/' . $this->template . '\/js\/main.js', 'text\/javascript');\n\n?><\/strong><\/span>\n<!DOCTYPE html>\n<html>\n\n<head>\n\n    <jdoc:include type=\"head\" \/><\/strong><\/span>\n\n<\/head>\n\n<body><\/pre>\n
      Once we make these changes and save our index.php file, we\u2019ll go back to our Joomla site and refersh the page. As you can see, our template is looking a bit better than when compared to the screenshot at the top of this article.
      \n      \"template-after-incorporating-css\"<\/a><\/p>\n
      <\/div>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      If you\u2019ve been following along in our tutorials series on creating Joomla 3.0 templates, you would have seen in our last tutorial after changing site templates that the template does not look very nice at all (see screenshot to the right). The reason the template looks a mess is because the CSS file that we 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-1846","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nHow to Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.\" \/>\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\/joomla-3\/add-css-and-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\" \/>\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=\"2012-10-07T20:59:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:34:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg\" \/>\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=\"3 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\/joomla-3\/add-css-and-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to Include CSS and Javascript files in a Joomla 3.1 Template\",\"datePublished\":\"2012-10-07T20:59:28+00:00\",\"dateModified\":\"2021-08-17T03:34:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\"},\"wordCount\":469,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg\",\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\",\"name\":\"How to Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg\",\"datePublished\":\"2012-10-07T20:59:28+00:00\",\"dateModified\":\"2021-08-17T03:34:16+00:00\",\"description\":\"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg\",\"width\":800,\"height\":555,\"caption\":\"new template installed Joomla\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Include CSS and Javascript files in a Joomla 3.1 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 Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting","description":"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.","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\/joomla-3\/add-css-and-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting","og_description":"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-10-07T20:59:28+00:00","article_modified_time":"2021-08-17T03:34:16+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to Include CSS and Javascript files in a Joomla 3.1 Template","datePublished":"2012-10-07T20:59:28+00:00","dateModified":"2021-08-17T03:34:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/"},"wordCount":469,"commentCount":4,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg","keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/","name":"How to Include CSS and Javascript files in a Joomla 3.1 Template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg","datePublished":"2012-10-07T20:59:28+00:00","dateModified":"2021-08-17T03:34:16+00:00","description":"In this article, we will show you how to use $doc-addStyleSheet and $doc-addScript to add css and javascript files to a Joomla 3.0 template.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_new-template-installed.jpg","width":800,"height":555,"caption":"new template installed Joomla"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-css-and-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Include CSS and Javascript files in a Joomla 3.1 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":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1846","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=1846"}],"version-history":[{"count":6,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1846\/revisions"}],"predecessor-version":[{"id":85538,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1846\/revisions\/85538"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}