Link to home
Start Free TrialLog in
Avatar of Adam
AdamFlag for Canada

asked on

Wordpress - Let's clean up that code! :)

Hey guys,

I've created my Wordpress site and am using quite a few plugins for my site. The issue I'm noticing is when I open my page and look at my source code, there is a whole whack of code, CSS stylesheets, and JavaScript files that are being imported even if the plugin isn't being used on every page. As well, I just find that the code added by the plugin is looking a little messy.

I was wondering if anyone has any suggestions on how I can clean up the code or if possible, remove unnecessary code from pages that aren't using particular plugins (which I think may be causing my site to load slowly).

Any suggestions would be much appreciated. Thanks!

P.S. My site can be viewed at www.operationlifesaver.ca
Avatar of James Williams
James Williams
Flag of United States of America image

Back up the site.. If you have winrar.  Select the files and rtclick and select "Add to archive". Coose "Store" as the method for the fastest way.
Go over the code and check  for redundent item. As I am sure you know...
Use a text file and document evey change.  except removing lines. SO you can put it back if needed.
Remove a suspected item.  and see if the site still works.  
Any thing you don't know where or how it got their. Remove it and see what happens.
Use Comments to tell you what is what <!-- the is a comment -->
Run each page thru hml tidy  Make sure you check the HTML TIDY box in th eoptions
http://validator.w3.org/check?
 
Selvol
 
 Below is how I try to keep my code.
 

analcode.gif
Avatar of Adam

ASKER

Thanks for the reply selvol. The only issue with your suggested approach is that most of the code gets "assembled" once you visit the site itself. I'm not sure if you have experience with Wordpress but the all of the site's code comes from a number of different PHP files. Also, all the plugins that I've installed automatically generate their code and add it into the page source. So as the content is driven dynamically, how would I be able to use your approach to clean up my code?

I've heard and have tested out HTML Tidy before but I'm not really sure how I can use it with my site seeing as how the code is being generated.

I'm obviously not really an expert in this matter. Would you be able to help point me in the right direction?
Are you worried about Speed? I assume so. Because I thought I was the only one Anal enough to care what 1% of the world see's.
LOL
Get this Plgin HERE FOR SPEED>....
http://mnm.uib.es/gallir/wp-cache-2/ 
"To speed up a WordPress site ,you must  install and configure WP-Cache correctly. This will caches the entire page, resulting in no PHP being run after initial run, and no database queries. Its smart enough to refresh the cache when the content changes, so its more or less transparent to the readers. If you are getting hit by links from a high traffic site, WP-Cache is virtually mandatory, as it will be serving static content at high speed instead of rebuilding your page every time."
 Install....
Upload to your plugins folder, usually wp-content/plugins/ and unzip the file, it will create a wp-content/plugins/wp-cache/ directory.
If you have Gzip Compression enabled turn it off (in Options->Reading).
Activate the plugin on the plugin screen.
Go to Options administration menu, select WP-Cache from the submenu, the plugin will try to autoconfigure everything. The plugin will try to autoconfigure everything and guide you through the process.
 
Selvol
 
Avatar of Adam

ASKER

Thanks again for the reply selvol. I am actually already using the WP-Cache plugin. My site was ridiculously slow before installing it. I still find it a little slow on pages with minimal graphics or content which is why I figured the excess of code might have had something to do with it.

But my main concern was more on how to "tidy" up my code as mentioned. I realize that very few people actually check the source code. It was more to satisying my own needs at becoming more efficient with my web development (yeah, I'm pretty anal myself with stuff like that).

I think I found another plugin that might help with cleaning up some of my code called Tidy Up (http://wordpress.org/extend/plugins/tidy-up/). It is essentially the equivalent of the HTML Tidy you mentioned earlier but specifically for Wordpress. I'm going to give that a shot.

If you have any other suggestions though on what I can do to improve my Wordpress code, I would definitely be open to them. Thanks again.
Avatar of Adam

ASKER

So I tested out the Tidy Up plugin I had mentioned but I don't think it works quite like I want it to. It only seems to check the code for things like pages, posts, comments, etc. It doesn't actually look at the output/page source for an entire page (i.e. header, nav, sidebars, footer, etc).

So I guess I'm back to square one. Once again, if anyone has any ideas on how I can "clean up" my code in my Wordpress site, I would really appreciate the help.
I was waiting to see if anyone else had anything to say.....
 I use texpad
Free trial forever.
I used the macro's.
First I use the on that deletes blank lines.
Then I
Ctrl+a  then ctrl+shift+i
Then I do the Zig zag indent with a macro I made.
To make a zig zag indent macro. In text pad.
Get a page ready like I stated above. All lines should start in the #1 left position.
Put you cursor at the beginning of the first line.  THe select macro , record. It's not a speed macro so you can take you time,.  One recording. From the first line push your code over 1 space the from the 2nd line push it over 2 and so on for about 10 lines the start going back wards ending back in the #1 position on line 20.
Macro , stop.  
Then you should be able to replay that on you pages.
And it should repeat the zig zag
 
http://www.textpad.com
http://www.textpad.com/add-ons/macros.html
 
Regards
Selvol
Avatar of Adam

ASKER

Thanks for the reply selvol.

Sorry, I'm not entirely sure I understand how to use your Textpad with the macros suggestion to clean my code. As my page source is assembled from multiple PHP files and is only generated once you load the actual site by visiting the URL, how can I use text pad to fix this?

Unless I'm wrong, it sounds like your solution would be good for a long HTML file where the source code appears pretty much as is when you visit the live site.

I'm just a little confused as to how to use your suggestion for dynamic content. Can you please clarify. I really appreciate the help.
ASKER CERTIFIED SOLUTION
Avatar of James Williams
James Williams
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Adam

ASKER

Thanks again for the reply selvol. You are absolutely right, I should have optimized my images better then I did. I appreciate you taking the time to optimize them for me. I will look over the rar files sometime later tonight. That should definitely help speed up some load time.

As for all the CSS files that are loaded, those are generated from the plugins I'm using in Wordpress. That was one of the issues I was talking about. I am using quite a few plugins on my site and most plugins seem to add their own CSS and Javascript files to my header dynamically. The annoying part is that most of the plugins are only being used on one or two page. But I'm not really sure how I can prevent that or to only have CSS or Javascript files run on the pages that the plugins are being used on.

And then that brings us back to the messy code. Because the plugins are being loaded dynamically and because of all the random CSS and Javascript files, I find my code to be all over the place.

Once again, I would appreciate any help I can get.

Thanks again selvol.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Adam

ASKER

Sorry for the late reply. Thanks for all your advice Selvol. Much appreciated.