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
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
 Below is how I try to keep my code.

AdamAuthor Commented:
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.
Get this Plgin HERE FOR SPEED>....
"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."
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.
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

AdamAuthor Commented:
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.
AdamAuthor Commented:
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
AdamAuthor Commented:
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.
You are correct about me being incorrect..
I looked at you page. Nice work.
Some things that are slowing it down are. The images.
The total weight of the page is 1.5Mb
The intro banner attached is 85KB on you page. Attached it 7KB
You have 2 of the "Did you know images loading" at 30Kb each
Attached is 11KB I changed it to a PNG. ANd  left the Intro A JPG due to the
flash association.  

You should optimize your images.  You can save a lot of page load time and not loose and quality in the images.  
Also you have a ton of css files..
Total files all together loading is 79.
Rename the Operation-Lifesaver-files.jpg to Operation-Lifesaver-files.rar to unzip.
That file contains everything that loads when your page is viewed.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AdamAuthor Commented:
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.
What you need to do is post or search for a question. With PHP as the subject....
LIke PHP code clean up. How to Optimize my HTML.  PHP is an extremely versatile program.. I use PHP on the site I am creating. ANd Php saved me soo much time.
Ray_Paseur Wrote me some scripts that I modified to go threw 40,000 pages and grab the text 3 lines up from each image and the write that text as the img alt.
I am sure php can anal code clean.  But optimize the images. and you will see a change.
See the thing about PHP is. It may come from many SOurces. But in the end your server has the last say in the way it is displayed.
AdamAuthor Commented:
Sorry for the late reply. Thanks for all your advice Selvol. Much appreciated.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.