I am building a custom theme from scratch for WooCommerce (using the hooks/dev method). I just finished the Shop page and I found out that the select tag filter for the products (filter by price/date/name) is not working. I quickly switched to Twenty Eleven and figured out that I am missing some frontend JS from Woocommerce.
Now I could copy all those Js files that I need but in the assets/js/frontend are a lot of more .js files and I think that I may need them as I am far away from being done with the theme. Copying either the necessary or all the js from the WC plugin folder to my theme JS folder would not be a problem but I feel that this is not the best practice to deal with this issue.
I read somewhere that in order to override the frontend JS from WC you have to dequeue and then enqueue your JS file. Which will work for me, still similar to the copy method, as will have nothing to override (as I am not loading any WC JS) but I will end up with the scrips loaded (as I will queue them).
Am I missing something? There's nothing to cover around this subject. If there's no other way I would simply copy them.
Thank you
Please be sure that you have wp_head() and wp_footer() in your theme's header.php and footer.php respectively. See Theme Development for best practices and standards.
Related
The theme options panel does not load correctly with certain themes on OpenShift. I am using Avada theme of wordpress that is built using Redux framework. Everything works perfect on localhost but when I host the site on openshift, the "theme options" doesn't work and FireBug's console shows that the stylesheet and script paths are messed up by openshift.
The current (invalid) url for an example stylesheet is like this:
https://my-website.com/wp-content/var/lib/openshift/5942968f2d527198350000f2/app-root/data/themes/themeName/includes/lib/inc/redux/framework/FusionReduxCore/inc/extensions/import_export/import_export/field_import_export.css
While it should be this:
https://my-website.com/wp-content/themes/themeName/includes/lib/inc/redux/framework/FusionReduxCore/inc/extensions/import_export/import_export/field_import_export.css
there should not be any /var/lib/openshift/ in entire url
I need to get this fixed but I dont know anything about coding in Redux framework and have no idea how to change the path and point it to right path.
This is a known issue reported
Here1, here2, here3, here4and so on.
This is not an issue with Redux.
This happens with theme
You have to contact the theme developer in order to fix this issue.
But there are solutions for to issues I posted above you can check it.
Anyway, I would like to post some fixes in the issues here
Quoting from WordPress
It's also important to note that PHP's FILE magic-constant resolves symlinks automatically, so if the wp-content or wp-content/plugins or even the individual plugin directory is symlinked, this function will not work corrrectly.
The theme link is symlinked. It is the issue.
A sample fix can be found here
Another one
Quoting from #Liggitt
Wordpress provides hooks to filter the plugin path. I wrote a simple plugin that will adjust the plugin url to be correct, even when a symlinked folder is used.
ssh into your wordpress application, and run the following:
cd app-root/data/plugins/
git clone git://github.com/liggitt/wordpress-plugin-symlink.git
Log into your wordpress admin console, and activate the plugin-symlink plugin.
Avada is a paid theme. When paid theme not working, developer should help you. It is purely related to that Theme, neither OpenShift nor core functions of WordPress. Newer WordPress supports different types of hosting and WordPress doc does have reference when URLs may be not like common traditional hosting.
I am giving an easy generic fix to load CSS at frontend. That plugin-symlink plugin offered by Sagar V is also generic. That is maximum we can do. You can try to find experienced Avada theme users.
Dependencies
Make sure that any dependency Wordpress plugin required by the theme is missing. Make sure that you have followed the guide of using Redux framework or that theme's official docs.
Examine how the links being generated
This is my 6 years old demo WordPress running on free Openshift with default WordPress theme without any issue. That theme's header file is finding html5.js by :
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
To find it, I went to Appearance > Editor > Theme Header (header.php) from WordPress admin. Lajos Arpad was asking you that via comments. The correct way is to modify that code. He/She was saying How are your URLs being generated? as we lack idea about which files, how generating the links. header.php does for common themes but Redux framework themes may do it differently. Lajos Arpad already suggested you to search for field_import_export in the whole project via comments.
Generic fix
However we have no code. We need a generic fix. It is a temporary fix for the frontend. You need this at front end :
https://my-website.com/wp-content/wp-cntent/themes/themeName/includes/lib/inc/redux/framework/FusionReduxCore/inc/extensions/import_export/import_export/field_import_export.css
Make sure it is present, not 404. Install Header & Footer like plugin. Inject the CSS at frontend via that plugin :
<link rel="stylesheet" href="https://my-website.com/wp-content/wp-cntent/themes/themeName/includes/lib/inc/redux/framework/FusionReduxCore/inc/extensions/import_export/import_export/field_import_export.css" type="text/css">
Comment out the lines injecting CSS, Js in theme's header file or where it is being calling. Load and test. The fix will not suppress any warning but frontend will have loaded on frontend.
Try dropping this into functions.php
function ReduxSymLinkURL(){
$url = "https://my-website.com/wp-content/themes/themeName/includes/lib/inc/redux/framework/FusionReduxCore/";
return $url;
}
add_filter( 'redux/_url', 'ReduxSymLinkURL', 10 );
Understanding Laravel Mix
I am currently in the process of migrating one of my websites to Laravel in order to make it a little more maintainable in future... I have plenty of experience building API's with Laravel but I have very limited experience building websites with Laravel and resultantly I am in need of a little bit of guidance from another pro.
In short, I would very much appreciate answers to the following very simple questions if anyone can spare me a couple of mins...
File based JS & CSS instead of App based
I like to write my JS and CSS files in a particular way where each page has their own specific files relevant to the page. For example, about.php might have the following dependencies:
JS:
jquery.js
any_other_third_party_library.js
app.js (global functions)
about.js (page specific functions)
CSS:
some_third_party_library.css
app.css (global styles)
about.css (page specific styles)
On my own framework, the above would be combined and minified into one file for JS and one file for CSS. From what I understand, Laravel Mix does exactly this...
However, as far as I can see, the way to do this would be as follows:
webpack.mix.js:
// About
mix.scripts([
'resources/assets/js/app.js',
'resources/assets/js/about/about.js'
], 'public/js/about/about.js');
Very simply, what I would like to know; is the above the correct way to go about this? Is there a better, more efficient, way to automate this for each page?
What are the bootstrap.js and app.js files?
From what I can see, these files just load dependencies but this is a little confusing as some dependencies might be page specific... Please can someone explain in a little further detail what these files are for? Or at least, what the difference is between them...
Getting rid of Vue
I have no interest in using Vue in my project so I have deleted the following files:
/components/Example.vue
and the Vue code in app.js
Does this matter in any way?
You'll bundle up all your styles and scripts a single file each and serve them to the client minified.
For front end assets, call mix.sass('resources/assets/sass/app.scss'). In that entry point to your styles you will be able to import your other stylesheets as you need using Sass's #import 'about'; syntax. (Rename your other CSS files to end in .scss too).
For your back end assets, call mix.js('resources/assets/js/app.js'). Then, similarly you can import other JavaScript modules using import './about.js';. You may want to look up ES2015 modules so you can learn how to write modular JavaScript.
Read through the bootstrap.js file to see how Laravel hooks up jQuery and Vue by default. You don't need any of this, so remove whatever you don't want or delete the entire file if you don't need any of it.
Vue comes out of the box with Laravel but it's just a suggestion, you can replace it with your own front end framework of choice or rip it out and replace it with nothing. Up to you.
Edit: Long story short; use mix.sass and mix.js, read up on using Sass and ES2015 modules to write awesome code.
I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege
firstly please pardon my complete ignorance in regards to Wordpress and Web Development in general if in being completely honest.
I have a theme on my website which came with a whole bunch of Javascript addons (like pretty photo) that i dont want. There are literally tons of them. Now, i want to remove the relevant files altogether, but that will result in 404 on those files (which wont help with my load times).
My question, i have been reading an aweful lot about wp_dequeue_script , and how it removes files.
Why not just delete the actual wp_enqueue_ files from function.php??
Does that cause problems? Any insight into the matter would be much appreciated.
Welcome to the world of Wordpress.
Why not just delete the actual wp_enqueue_ files from function.php??
The only answer and explanation to this question is, if you are not the author of a plugin or theme, never make any type of modification to that plugin or theme. This also goes for Wordpress core files. The simple reason being, if you ever upgrade your theme/plugin/core, all your changes will be lost and cannot be retrieved. This is a very costly mistake
The proper way
In your case, you should use functions like wp_deregister_script() and wp_dequeue_script() to remove scripts you don't need. See this post on how to correctly remove scripts.
This functions should go in either a custom plugin or a child theme. This should never go into the theme directly as this will be deleted when you update your theme.
I hope this helps
I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml