Wordpress MP3 plugin conflict

[soulster]

Hi,

I'm trying to set up a new site with the roots theme as a base, but this plugin, MP3-jPlayer 1.7.3, doesn't seem to work. It works in every other theme I've tried, so I'm wondering if it's a javascript problem. Would you mind taking a look at my code at http://groovyacousticsoul.com/beta2/sample-page/ and telling me if you see any conflict. I've tried removing javascripts from the header file in roots, but that didn't work.

Thanks so much for any help! It's a very cool theme from what I've been able to understand of it so far!

• J

[swalkinshaw]

GET http://groovyacousticsoul.com/wp-includes/js/jquery/ui/jquery.ui.slider.min.js 404 (Not Found) GET http://groovyacousticsoul.com/wp-content/plugins/mp3-jplayer/js/jquery.jplayer.min.js 404 (Not Found) GET http://groovyacousticsoul.com/wp-content/plugins/mp3-jplayer/js/mp3j-functions.js 404 (Not Found) GET http://groovyacousticsoul.com/wp-content/plugins/mp3-jplayer/js/mp3-jplayer.js 404 (Not Found)

You should probably load up Firebug/Chrome dev tools and check the console while browsing sites you develop.

What version of Roots? Child theme or not? Are you using Roots URL rewrites?

[retlehs]

after you fix your 404s, this should be fixed after 49300042c8dc00170b10ccc7b61d9c966f9e41ee

[soulster]

Hi,

Thank you both for your suggestions. Unfortunately, they didn't work. It's something to do with the way the path to the plug-in gets written. I've even changed the option to Enable Root Relative URLs to "No". The installation is in beta2/ and when I looked at the source after activating another theme, it showed the entire url, for example: http://groovyacousticsoul.com/beta2/wp-includes/js/jquery/ui/jquery.ui.slider.min.js, whereas the result with Roots was: /wp-includes/js/jquery/ui/jquery.ui.slider.min.js

Because I can't have two themes up at once, here's a link to the code for a theme where the plugin works (it actually works on every other theme I've tried): http://groovyacousticsoul.com/examples/workingcode.txt and the Roots theme generated code: http://groovyacousticsoul.com/examples/rootscode.txt

What could I change? I placed the four "missing" scripts on the server in the place from where they'd be called as the page is written with Roots, but that still didn't make it work. I'm sure there's a solution that could be beneficial for the theme or I wouldn't waste your time, as the plug-in has worked with everything else I tried. I just spent some time getting to know your CSS and customizing it, so I don't want to abandon your framework.

Thanks so much for your help.

[retlehs]

i was just able to get that plugin working with the latest roots, can you try updating everything? if you have options for enabling root relative URLs you are on an older version

[soulster]

That's right, I started with version 4 a couple weeks ago. I just installed the latest Roots and I'm still having a problem. Could some of the modifications due to the "root relative" options have created a permanent break? I have it set up in two different beta sites so you can check it out. Both directories originally had 4 installed. I haven't done a complete reinstall of WordPress in a new directory yet. If you think I should, I will. Here are the links:

A different theme that works: http://groovyacousticsoul.com/beta2/sample-page/

Roots 5.0.0-7-gcdc3267: http://groovyacousticsoul.com/beta3/sample-page/

Thanks so much for your help.

J

[retlehs]

looks like it's broken because you're getting 404s on those scripts - they should be loading properly, they are the same URLs used on my local dev setup where it's working

[soulster]

So I think the problem is that the other themes create full addresses and maybe when WordPress is in another directory than the site root it creates a problem for Roots.

For example, the theme that works points to [script type='text/javascript' src='http://groovyacousticsoul.com/beta2/wp-includes/js/jquery/ui/jquery.ui.slider.min.js?ver=1.8.16'></script]

Roots points to [script src="/wp-includes/js/jquery/ui/jquery.ui.slider.min.js"></script]

I put the ui scripts that swalkinshaw referenced in the root folder following the structure "/wp-includes/js/jquery/ui/"

But now when I look at the code some of the other files get 404 errors. I could try to hunt them down and physically place them in the root directory, and see if it works, but that would seem to be a duct tape solution. (It appears the code generated is looking for this plugin in the root directory rather than "/beta3/" as well.)

I'm not sure what plugins.js does. But I find it referenced in the Roots theme, but not the other working theme.

Is there a way to customize Roots so it references the full address and see if that will make the plugins work? It would probably make the code heavier, but it would be worth a shot for me.

Thanks again for your help.

J

[soulster]

Hi.

I'm still having no luck. I did a completely fresh install of WordPress and Roots, the only plugin I installed was MP3-jPlayer 1.7.3 and it still didn't work.

Could you find any reason this might be happening? Can you send me a link to your site where it works? And would it be ok to reopen this case so maybe someone else in the community might be able to help?

Thanks.

[brianfeister]

@soulster I've had some experience with the types of issues you're dealing with. Can you http://pastebin.com your header.php for me and I'll take a look and see if I see anything obvious?

[soulster]

@brianfeister Thanks for the offer. I'm new to pastebin.com, but maybe this works: http://pastebin.com/hVAVfuV0

And here are text files of the code for a page that worked and the problematic page.

http://groovyacousticsoul.com/examples/workingcode.txt http://groovyacousticsoul.com/examples/rootscode.txt

I really appreciate your help!

Cheers.

[brianfeister]

@soulster Ok. A few things.

@retlehs is correct in saying that 404 errors are your problem. I think you may be pretty new as a developer so I'll give you a tip for development. I use Google Chrome because it has a great Developer Tools set. Just go to your page and right click and select "inspect element" at the bottom of the list. From here, navigate to the RESOURCES tab: http://drm.st/EFTB. You can see in my screengrab (from your site) that you've got a "failed to load" warning. Roots theme rewrites URLS via the htaccess file and gives you cleaner looking URLs (optionally). I assumed this was you problem but it's not. Your URL for http://groovyacousticsoul.com/wp-content/plugins/mp3-jplayer/js/jquery.jplayer.min.js could hypothetically lack the wp-content portion if the Roots .htaccess rewrite were working, however, when I check http://groovyacousticsoul.com/plugins/mp3-jplayer/js/jquery.jplayer.min.js that also returns a 404 so I think your plugin is missing or was deleted. Try deleting the mp3j plugin and re-installing it.

[soulster]

@brianfeister Thanks so much for looking into this. From what you're writing, I'm thinking that it would work if my WordPress installation were in the root directory, but it's in a subdirectory /beta4/ in this case. That's what I was trying to understand in one of the earlier posts.

You can see if you go to http://groovyacousticsoul.com/beta2/sample-page/ you'll see that the theme points to the plug-in and it works.

If you go to http://groovyacousticsoul.com/beta3/sample-page/ using the Roots theme, it doesn't work.

If you go to http://www.groovyacousticsoul.com/beta4/test and see the source, it also sets the paths to point to http://www.groovyacousticsoul.com/beta4/wp-content/plugins/mp3-jplayer/js/mp3-jplayer.js and so on.

Roots, seems to lighten code, but it loses the mapping to the installation directory.

You're definitely right that I'm new to this side of things, especially HTML5. And I hope my questions don't seem too newbie. But I really think there's got to be a simple solution here since other themes can use the plugin in the same setup and Roots can't. However I'm not sure I'm asking the question properly.

(I do see that my ".htacess" is set to write only for "Owner." "Execute" is not checked for anyone and "Read" is checked for all. Could I have made a mistake there?)

Thanks again for your help.

[brianfeister]

@soulster Question: you are using separate installations of WordPress for beta2 and beta3 right? If not you should be.

As far as the 404's go - unfortunately, you're wrong about Roots theme being the cause. I mean, yes it's related, but the issue can be surmounted.

Here is your site right now 02/16/12 @ 10:20am: http://drm.st/EFSa. Notice the /wp-content/plugins... that area should have the full URL path http://groovyacousticsoul.com/beta3/wp-content/plugins... and that's the reason things aren't working for you.

Right now, going to http://drm.st/EGNa / http://groovyacousticsoul.com/beta3/plugins/mp3-jplayer/js/mp3-jplayer.js will correctly show you the plugin you're looking for, but also http://groovyacousticsoul.com/beta3/wp-content/plugins/mp3-jplayer/js/mp3-jplayer.js shows the same script.

This is the correct behavior for Roots theme - it invisibly rewrites URLs so that the server can find the file, regardless of which access URL you point to. Your problem is that WordPress thinks it's root URL is the relative /wp-content/... when it should be pointing to an absolute http://groovyacousticsoul.com/beta3/....

Most likely you changed the root URL inside the "reading" option in the WordPress admin dashboard. Make it the full path http://groovyacousticsoul.com/beta3 and you should be fine.

[soulster]

Hi @brianfeister. Yes, I'm using separate installations in beta2, beta3 & beta4. I haven't changed anything that I know of in the admin panel with regard to relative paths in the reading option.

If you'll take a look at the source code for page http://groovyacousticsoul.com/beta3/sample-page/ now, you'll see that all the paths are absolute. All I've done is change the theme. (And the plugin works.)

How do you change the settings to make all themes write absolute paths and not relative?

Thanks again for your help.

[brianfeister]

Good question @soulster - I haven't played with the latest version of Roots theme - @swalkinshaw @retlehs - any changes that would cause a default installation to use relative URLs rather than absolute?

[brianfeister]

Additional comments:

1) Try to go to the Roots options menu in the theme and disable "clean URLs" this is where the htacess rewrite is initiated. Turning it off might fix the problem

2) If that doesn't work, try to delete your .htaccess file and then activate Roots theme - when Roots is activated for the first time it creates an htaccess file - if you switch to another theme / delete the htacess / re-activate Roots, that might do it.

[retlehs]

@soulster - i'm seeing what you're seeing now that i've moved my setup into a subdirectory. working on a fix with @swalkinshaw

[soulster]

Great, thanks! I've been searching around, too. Could it be something in the roots-htaccess.php file? I was wondering if it was something under the comment // only use clean urls if the theme isn't a child or an MU (Network) install

or the comment: // rewrite /wp-content/plugins/ to /plugins/.

I noticed that the relative paths started under a line looking that began link rel="stylesheet.... But the paths written in other sections are absolute.

Anyway, I hope my amateur sleuthing can be of some help! And, again, thank you so much for continuing to look into this!

[soulster]

Thanks for making it work!