{"id":6407,"date":"2018-04-04T22:24:18","date_gmt":"2018-04-04T22:24:18","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=6407"},"modified":"2024-04-24T12:48:19","modified_gmt":"2024-04-24T12:48:19","slug":"optimization","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/optimization\/","title":{"rendered":"optimization"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2tnwhj-dda1c49d6dd5d0cffd5e09fbdd17bc4b\">\n#top .av-special-heading.av-2tnwhj-dda1c49d6dd5d0cffd5e09fbdd17bc4b{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-2tnwhj-dda1c49d6dd5d0cffd5e09fbdd17bc4b .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-2tnwhj-dda1c49d6dd5d0cffd5e09fbdd17bc4b .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-2tnwhj-dda1c49d6dd5d0cffd5e09fbdd17bc4b av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Optimization<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-cqwubb-4afa188ea3af7c53936f2e9221ce490b hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-afyavr-520f82a108b0c2640ec9ff177d94c13d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-9gd81z-be3514a72d9be79dfd31036d29525ed4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tips and tricks to\u00a0optimize your theme.<\/p>\n<p>Performance options can be found in the Enfold theme options &gt; Performance tab.<\/p>\n<p>There are three performance options for the CSS and JS files included in Enfold:<\/p>\n<ul>\n<li>Disabled &#8211; this option uses unminified theme files.<\/li>\n<li>Use minified theme CSS ( or JS ) files without merging &#8211; this option uses minified version of theme files. This option is selected by default starting from Enfold 5.7<\/li>\n<li>Merge and compress all theme CSS ( or JS ) files &#8211; this option merges and compresses theme files.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13730\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options.png\" alt=\"\" width=\"1510\" height=\"921\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options.png 1510w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-300x183.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-1030x628.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-768x468.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-1500x915.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-705x430.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-450x274.png 450w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Compression-and-merging-options-600x366.png 600w\" sizes=\"auto, (max-width: 1510px) 100vw, 1510px\" \/><\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-73to5j-b098e8b02b44f094d1591a1233286deb hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-57kysn-e849159b6875969c66b7636800f20d32 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>CSS and JS Merging<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4k5cfb-efe006dc3aed30fe1f998d1a81b11de5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Built-in script merging feature can be enabled or disabled from the <strong>Enfold theme options &gt; Performance &gt; File Compression<\/strong>. Here look for the heading titles &#8220;<strong>CSS file merging and compression<\/strong>&#8221; and &#8220;<strong>JavaScript file merging and compression<\/strong>&#8220;.<\/p>\n<\/div><\/section>\n<div  class='hr av-7yamw7-304e4d727df072d6138022f66e28b1e8 hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-57kysn-21-437c751ca8c7d26a719b1c9b4daaa28e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Problem with CSS file merging<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-57kysn-19-ff43865e4c60d6bd51f8387fcfcfb8b3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The CSS merging feature may not work as intended or the background images may not show properly if there is an issue with the way the CSS file is encoded or because of some CSS syntax error in the style sheet. To resolve the CSS file merging issue, please perform the below steps:<\/p>\n<ul>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">Clear the cached files<\/a> on your server and local browser.<\/li>\n<li><a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">Validate your custom CSS styles<\/a> for possible syntax errors.<br \/>\n<strong>Note<\/strong>: Usually CSS warnings are not errors but a false positive so you can just ignore the warnings displayed by the validator.<\/li>\n<li>Delete any empty text boxes or non-printable characters that usually appears at the top of your style sheet. To highlight the empty text boxes, press the shortcut keys &#8220;Ctrl + A&#8221; and select all the text in your style sheet.<\/li>\n<li>If your CSS code contains <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_Unicode_characters\" target=\"_blank\" rel=\"noopener\">Unicode characters<\/a> it is necessary to set the encoding of the style sheet to Unicode UTF-8. To tell the browser to encode the file in the correct format, specify <strong>@charset &#8220;UTF-8&#8221;;<\/strong> at the top of your custom CSS.<\/li>\n<li>Go to Enfold &gt; Theme Options and save the options to force re-generate the minified files.<br \/>\nNOTE: You need to make any simple change in the settings to enable the save button.<\/li>\n<li>If your theme was recently updated via theme options, please be sure that the update process was completed without any error message at the end.<\/li>\n<li>Try <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/theme-update\/#update-via-ftp\" target=\"_blank\" rel=\"noopener\">updating the theme via FTP<\/a>, After updating the theme make any changes in the theme options and save the options to force re-generate the merged files.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-7yamw7-20-6e7624702e1ad5ee0b81233f9a9aae3f hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5jia1j-a47244eded7df0af66cb9221ec87be32 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Full width Quick CSS text area<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4smzif-cf2e80034b806abd3dfe8417183ce1a7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Quick CSS is a great way to add your custom styles. In case you use it often and your list is growing and want more space to manage the code please add the below function to your functions.php. If your list of modifications is growing we recommend installing a child theme and using the style.css to add your styles which can be accessed from Appearance &gt; Editor<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12740\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS.png\" alt=\"\" width=\"1165\" height=\"658\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS.png 1165w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS-300x169.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS-768x434.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS-1030x582.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS-705x398.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/Quick-CSS-600x339.png 600w\" sizes=\"auto, (max-width: 1165px) 100vw, 1165px\" \/><\/p>\n<\/div><\/section>\n\n<div  class='hr av-7yamw7-18-47f15df764e1575249162b6f5c1d0bf6 hr-default  avia-builder-el-14  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5jia1j-17-bd170318d4a92b8b1dee532e5630731d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to hide Enfold theme options like &#8220;Demo Import&#8221; or &#8220;Theme Update&#8221; tabs.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-14-d411144b08e81c1166dc1523bc4ade54 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To hide the &#8220;Import Demo&#8221; and &#8220;Theme Update&#8221; tab in the theme options please add the below code to your functions.php file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12744\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/theme-options-tab.png\" alt=\"\" width=\"554\" height=\"543\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/theme-options-tab.png 554w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/theme-options-tab-300x294.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/theme-options-tab-36x36.png 36w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-5jia1j-13-87fd2892ba9f13972a95dc40472fc3ca '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The CSS class name refrence to all the theme optiosn tabs are mentioned below and it can be used to add custom CSS styles:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-k3fq8swo-34932310a9fd7e3d6a3d0939df81eddd av-minimal-toggle  avia-builder-el-19  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-22ww9z-baec27429175abc9f9326c76055a58c0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"CSS Class name reference\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS Class name reference\" data-aria_expanded=\"Click to collapse: CSS Class name reference\">CSS Class name reference<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/* avia tab *\/<br \/>\n.avia_section_header.goto_avia,<br \/>\n.avia_subpage_container#avia_avia {<\/code><\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* layout tab *\/<br \/>\n.avia_section_header.goto_layout,<br \/>\n.avia_subpage_container#avia_layout {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* styling tab *\/<br \/>\n.avia_section_header.goto_styling,<br \/>\n.avia_subpage_container#avia_styling {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* customizer tab *\/<br \/>\n.avia_section_header.goto_customizer,<br \/>\n.avia_subpage_container#avia_customizer {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* menu tab *\/<br \/>\n.avia_section_header.goto_menu,<br \/>\n.avia_subpage_container#avia_menu {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* header tab *\/<br \/>\n.avia_section_header.goto_header,<br \/>\n.avia_subpage_container#avia_header {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* sidebars tab *\/<br \/>\n.avia_section_header.goto_sidebars,<br \/>\n.avia_subpage_container#avia_sidebars {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* footer tab *\/<br \/>\n.avia_section_header.goto_footer,<br \/>\n.avia_subpage_container#avia_footer {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* builder tab *\/<br \/>\n.avia_section_header.goto_builder,<br \/>\n.avia_subpage_container#avia_builder {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* blog tab *\/<br \/>\n.avia_section_header.goto_blog,<br \/>\n.avia_subpage_container#avia_blog {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* social tab *\/<br \/>\n.avia_section_header.goto_social,<br \/>\n.avia_subpage_container#avia_social {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* performance tab *\/<br \/>\n.avia_section_header.goto_performance,<br \/>\n.avia_subpage_container#avia_performance {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* cookie tab *\/<br \/>\n.avia_section_header.goto_cookie,<br \/>\n.avia_subpage_container#avia_cookie {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* newsletter tab *\/<br \/>\n.avia_section_header.goto_newsletter,<br \/>\n.avia_subpage_container#avia_newsletter {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* google tab *\/<br \/>\n.avia_section_header.goto_google,<br \/>\n.avia_subpage_container#avia_google {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* demo tab *\/<br \/>\n.avia_section_header.goto_demo,<br \/>\n.avia_subpage_container#avia_demo {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* upload tab *\/<br \/>\n.avia_section_header.goto_upload,<br \/>\n.avia_subpage_container#avia_upload {<\/p>\n<p><code><\/code><\/p>\n<p>}<\/p>\n<p><code><\/code><\/p>\n<p>\/* update tab *\/<br \/>\n.avia_section_header.goto_update,<br \/>\n.avia_subpage_container#avia_update {<\/p>\n<p><code>\u00a0<\/code><\/p>\n<p><code>}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-7yamw7-15-28f18d862c2c2dad2fd46640fed53b9c hr-default  avia-builder-el-20  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5jia1j-12-adf34bdc0ef140786b53066935669824 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2><strong>Minifying CSS and JS Files<\/strong><\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-8-e59e2b60b64add08a52ad9de453a383a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can use <a href=\"https:\/\/gulpjs.com\/\">Gulp<\/a> and <a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a> to minify your modified CSS and JS files.<\/p>\n<p>Instructions in this section are for developer-level users. If you&#8217;re an entry-level user or uncomfortable following these instructions alone, please pass these instructions over to your developer.<\/p>\n<p><strong>Windows<\/strong> users will need:<\/p>\n<ul>\n<li>Command Prompt<\/li>\n<li>Windows Power Shell<\/li>\n<\/ul>\n<p>When installing you must run these windows in &#8220;as administrator&#8221; context. Close the window and open it again to allow PATH variable settings to be recognized.<\/p>\n<p><strong>macOS<\/strong> users will need:<\/p>\n<ul>\n<li>Terminal<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-7yamw7-10-4d1e68eb87929491b847d976f16f5d21 hr-default  avia-builder-el-23  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5jia1j-9-dba0a72a297be605be828da71eea186a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Installation Basic Components<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-lvdshzkt-fd6ca7a0e71b71f00006d219a38794b6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li><a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\" rel=\"nofollow\">Install NPM and NODE.JS<\/a><\/li>\n<li><a href=\"https:\/\/phoenixnap.com\/kb\/install-npm-mac\" rel=\"nofollow\">Install NPM and NODE.JS for MacOS<\/a>\n<ul>\n<li>Before installing, make sure that you are on the root path (e.g. \/Users\/your-mac-username)<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/webpack.js.org\/guides\/installation\/\" rel=\"nofollow\">Install Webpack (Same for Windows and macOS)<\/a><\/li>\n<li><a href=\"https:\/\/gulpjs.com\/docs\/en\/getting-started\/quick-start\/#install-the-gulp-command-line-utility\" rel=\"nofollow\">Install ONLY Gulp Command Line Utility<\/a>\n<ul>\n<li>npm install &#8211;global gulp-cli<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-w1h07-c7f0b41da5b8407cffd06eb39c19abc9 hr-default  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7hifcn-19b82c91a873e804a9d38c15532bb441 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Adding Gulp (and Webpack) To Enfold<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5a6ufb-34db67fe83d077eafe5c01f5599ca46f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Read\u00a0<a href=\"https:\/\/webpack.js.org\/guides\/getting-started\/\" rel=\"nofollow\">Basic Steps &#8211; Getting Started<\/a>\u00a0and do the following steps.<\/p>\n<ul>\n<li>Open Command Line (Terminal for MacOS users)<\/li>\n<li>Navigate to theme folder in your localhost server and create a new directory dev there (e.g. to c:\/xampp\/htdocs\/wp65\/wp-content\/themes\/enfold\/dev)<\/li>\n<li>npm init -y<\/li>\n<li>( npm install webpack webpack-cli &#8211;save-dev )<\/li>\n<li>npm install gulp &#8211;save-dev<\/li>\n<li>npm install gulp-clean-css &#8211;save-dev<\/li>\n<li>npm install gulp-rename &#8211;save-dev<\/li>\n<li>npm install gulp-minify &#8211;save-dev<\/li>\n<li>npm install gulp-clean &#8211;save-dev<\/li>\n<li>edit package.json:\n<ul>\n<li>remove: &#8220;main&#8221;: &#8220;index.js&#8221;<\/li>\n<li>add: &#8220;private&#8221;: true,<\/li>\n<li>to scripts add: &#8220;build&#8221;: &#8220;webpack&#8221;<\/li>\n<\/ul>\n<\/li>\n<li>( added webpack.config_js.js &#8211; modify this file in case new files are added and .min.js should be added in the location of the source. )<\/li>\n<li>added gulpfile.js &#8211; contains export functions to run minification<\/li>\n<li>added gulpfile_data_js.js &#8211; contains the js files to minify. Modify this file in case new js files are added or removed.<\/li>\n<li>added gulpfile_data_css.js &#8211; contains the css files to minify. Modify this file in case new css files are added or removed.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-2ixgg7-ece194257506499a56cc68af151cd0d3 hr-default  avia-builder-el-29  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-lvdstbnb-eb2d28443560bd384005d96936b64d60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>To run the scripts to create the .min. files<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-lvdsu0j3-982669aff940762e838adfc739eedcb6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>( npm run build &#8212; &#8211;config webpack.config_js.js )<\/li>\n<li>gulp minifyEnfold ( &#8212;&gt; minifies all files )<\/li>\n<li>gulp minifyEnfoldCSS<\/li>\n<li>gulp minifyEnfoldJS<\/li>\n<li>gulp deleteEnfold ( &#8212;&gt; deletes all minified files)<\/li>\n<li>gulp deleteEnfoldCSS<\/li>\n<li>gulp deleteEnfoldJS<\/li>\n<\/ul>\n<p>In case you want to create a bundled file and avoid to run npm install and the node_modules directory:<\/p>\n<ul>\n<li>Check webpack.config_bundle_gulp.js<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-2kdjg7-c38d70a4cfb86b8c3399e0befd4bddb1 hr-default  avia-builder-el-32  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-lvdt09gh-85b7afbba166099cf6d4c307a070de7f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Using minified files on the child theme<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-lvdt5yqv-0a7eb6e747b177aaa9b80400aa96d49c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To use the minified files from your Enfold <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">child theme<\/a>, you can use the following code snippet in the Functions.php file of your child theme:<\/p>\n<pre><code>add_action( 'wp_print_scripts', 'ava_change_wp_enqueue_scripts_mod', 100 );\r\nfunction ava_change_wp_enqueue_scripts_mod() {\r\n    $vn = avia_get_theme_version();\r\n    $options = avia_get_option();\r\n    $min_js = avia_minify_extension( 'js' );\r\n    wp_deregister_script( 'avia-default' );\r\n    wp_enqueue_script( 'avia-child-default-js', get_stylesheet_directory_uri() . \"\/js\/avia{$min_js}.js\", array('jquery'));\r\n}<\/code><\/pre>\n<p>The code above would deregister the avia.js file from the Enfold paren theem and use the avia.js ( or avia.min.js file depending on the option you selected in the Enfold theme options &gt; Performance &gt; CSS File Compression And Merging field ). Please make sure to place avia.js and avia.min.js files inside \/js\/ folder.<\/p>\n<\/div><\/section>\n<div  class='hr av-nqwjr-4640b918ebbe70fde3b900d4067cf24d hr-default  avia-builder-el-35  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-426hdz-927bfda849db2bbcd236f4f172f97b88 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2><strong>Developer Info<\/strong><\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3qeyh3-734ee61ee6dcb74369cf20cd9f826702 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Filters<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-9ypw7-13d3ce2043e354a7baaad37af9a4487e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To further modify the update options please check out the below filters and examples.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-k3fq8swo-11-bd498a8cef9922a40c17ff5fbb3f8f8b av-minimal-toggle  avia-builder-el-39  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-pkx3b-fc5fe20f41e0724c183a9ab869e5d092'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Hide a specific data field on the option page\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hide a specific data field on the option page\" data-aria_expanded=\"Click to collapse: Hide a specific data field on the option page\">Hide a specific data field on the option page<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-5fklqf-b1c854fc03a55806dd45a5fbe9744f99'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Hide a tab on the option page\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hide a tab on the option page\" data-aria_expanded=\"Click to collapse: Hide a tab on the option page\">Hide a tab on the option page<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4s1jwn-838e684123272625c24ab6eaf3d8130a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Add or alter elements on the option page\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add or alter elements on the option page\" data-aria_expanded=\"Click to collapse: Add or alter elements on the option page\">Add or alter elements on the option page<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2r6b6f-7dbf61b2c9062f35bc1951503b0ad63e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"Add or alter tabs of the option page\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add or alter tabs of the option page\" data-aria_expanded=\"Click to collapse: Add or alter tabs of the option page\">Add or alter tabs of the option page<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1twe6f-8d5e341085849878cfc31c256c0b4b98 hr-default  avia-builder-el-44  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5jia1j-7-54c9d68486641c2c2b6f3e404cb2c846 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Troubleshoot<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-4-eb805b20f33da481a7eec9a28ec9f0a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>As long as you do not change the theme version number, all changes to content of <strong>js<\/strong> or <strong>css<\/strong> files will result in the same hash extension. Which means browsers will not recognize these changes until the browser cache expires. To fix this Enfold adds an additional unique timestamp (since 4.7). Some server configurations cache internal WP data and therefore return wrong information about the existence of a compressed file &#8211; and as a result, it generates a new file on each page load and folder ..\/wp-content\/uploads\/dynamic_avia rapidly grows.<\/p>\n<p>To avoid this you, can go to <strong>Enfold theme options &gt; Performance &gt; Show advanced options<\/strong> and choose &#8220;<strong>Disable adding unique timestamps<\/strong>&#8221; in &#8220;<strong>Unique timestamp of merged files<\/strong>&#8221; to suppress adding the timestamp. Depending on your hoster, it may still take some time till this setting will work correctly. Disable file merging, select &#8220;<strong>Delete old CSS and JS files<\/strong>&#8221; &#8211; wait for some time, clear server cache and then reactivate your settings.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-3-d9193be1e30ee57fcb381944ba268e1e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Information for users with database, file merging and uploads\/dynamic_avia folder problems (wp object cache related):<\/strong><\/p>\n<p>&#8211; <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/theme-update\/\">Update Enfold<\/a><br \/>\n&#8211; Theme options -&gt; Performance -&gt; Show advanced options -&gt; Unique timestamp of merged files and WP object cache bug<br \/>\n&#8211; Fix WP bug add unique timestamp or<br \/>\n&#8211; Fix WP bug disable unique timestamps<br \/>\n&#8211; Disable js and css file merging and compression<br \/>\n&#8211; Check Theme options -&gt; Performance -&gt; Delete old CSS and JS files<br \/>\n&#8211; Save theme options (this will clean up database and remove all merged files)<br \/>\n&#8211; <strong>Clear server cache<\/strong><br \/>\n&#8211; Enable js and css file merging and compression if desired<br \/>\n&#8211; Uncheck Theme options -&gt; Performance -&gt; Delete old CSS and JS files if desired<br \/>\n&#8211; Save theme options<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-2-bcfd0eb3c93656d3cf81ace94ed76299 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Performance compression is not working<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jia1j-1-9f4a598ccc553ece54a07e27518d90f4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>When using a host with a staging or dev environment like <a href=\"http:\/\/bit.ly\/kwpengine\" target=\"_blank\" rel=\"nofollow noopener\"> WpEngine<\/a>, Siteground or Flywheel etc. or any server where a .htaccess password has been set.<br \/>\nEnfolds script merge function cannot verify the creation of the merged files and produces an error code 21 in the database merge fields.<\/p>\n<p><strong>The function should run correctly in live anyway.<\/strong><br \/>\nTo resolve in staging environments \u2013 I assume for testing purposes \u2013 Remove the password temporarily and then turn script merging off and on again in the Enfold performance control panel.<\/p>\n<p>This will allow the process to verify the creation of the files and serve a merged script.<br \/>\n<strong>Live push<\/strong> \u2013 I would recommend disabling script merge and re-enabling it after going live because the process will need to run again in live anyway.<\/p>\n<p>Quoted from <a href=\"https:\/\/kriesi.at\/support\/topic\/performance-compression-not-working\/#post-1328360\">ThinkJarvis<\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-6407","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/6407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=6407"}],"version-history":[{"count":30,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/6407\/revisions"}],"predecessor-version":[{"id":13743,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/6407\/revisions\/13743"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=6407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=6407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=6407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}