How to tidy (or edit) wordpress source code ? WordPress
Hi Guys,
I have left other questions on forums and received some very helpful information however I am not all the way there yet.
I have recently started working with wordpress and its obviously not as easy as editing normal xhtml code.
On my travels I came across this website design company : www.flatout.co.nz
And ideally I would like to setup wordpress sites as these guys do but I haven’t figured it all out yet.
There code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="Flatout Web Design- Professional Invercargill Southland and Takapuna Auckland web design, from easy to use websites to advanced features. Leaders in making web sites simple to use." />
<meta name="robots" content="index,follow" />
<meta name="title" content="Flatout Web Design + Applications - Invercargill - Auckland - Takapuna - Southland - New Zealand" />
<title> Home | Flatout Web Design + Applications - Invercargill - Auckland - Takapuna - Southland - New Zealand</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ////////////////////////////////// -->
<!-- // Start Stylesheets // -->
<!-- ////////////////////////////////// -->
<link rel="stylesheet" href="css/style.css?v=1" />
<link rel="stylesheet" href="css/color.css?v=1" />
<!-- ////////////////////////////////// -->
<!-- // Javascript Files // -->
<!-- ////////////////////////////////// -->
<script src="js/libs/modernizr-1.6.min.js"></script>
<script src="js/libs/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='js/cufon/cufon-yui.js?v=1'></script>
<script type='text/javascript' src='js/Century_Gothic_400.font.js'></script>
<script type='text/javascript' src='js/cufon/cufon-replace.js?v=1'></script>
<script src='js/piecemaker/swfobject.js?v=1'></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<!-- SCRIPT -->
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Assign Fancybox
*/
$("a[rel=fancybox]").fancybox({
'titlePosition' : 'inside'
});
$(".iframe").fancybox({
'titlePosition' : 'inside',
'width' : 900,
'height' : 650
});
});
</script>
</head>
<body class="home">
<div class="wrapper">
<!-- header -->
<header>
<div class="wrap">
<!-- logo -->
<div class="logo">
<h1><a href="index.html"><img src="images/logo.png" alt="Flatout" title="Flatout" width="160" height="60" /></a></h1>
</div>
<!-- /logo -->
<!-- main menu -->
<nav>
<div style="float: right; padding-left: 30px;">
<form method="get" id="searchform" action="/index.php" name="form1">
<fieldset>
<input id="searchBox" name="keywordSearch" type="text" value=""/>
<input type="hidden" name="pageLoad" value="116"/><a href="javascript:document.form1.submit()" class="prosto_button60">search</a>
</fieldset>
</form>
</div>
(see image for full or view source of website link above)
Its very tidy and doesn't even give any indication that wordpress is being used. I have experimented with various plugins to tidy up and remove certain wp tags but cannot get it to look as these guys have theirs. How have they done it?
Many Thanks in advanced,
Milford
PS sorry, for the link not posting properly.
---------------------------------------------------------
Thanks for all your help guys and a quick response. I know its a difficult and hard to explain scenario, but having a wordpress source code looking as these guys do would made my day.
I know the code doesn't look like wordpress but looking at there past work :
http://www.consumerlink.co.nz/index.php?pageLoad=30
http://demo.templatesquare.com/wordpress/pixelblob3/ (demo from themeforest)
I can see it must be wordpress, just cleverly manipulated, if you look at the source code using firefox and click on the css file you can see the theme author and details.
I am going to try a few suggestions you have left in the morning, but thanks for all your support and professional help.
Milford
Answers (12)
Lew Ayotte answers:
Your link isn't there...
Lew Ayotte comments:
Why do you think they're using WordPress?
BTW, the link is there, but no actual text associated with it. http://www.flatout.co.nz/
Lew Ayotte comments:
I concur with Denzel:
www.flatout.co.nz is not WordPress
http://www.consumerlink.co.nz/index.php?pageLoad=30 is not WordPress
http://demo.templatesquare.com/wordpress/pixelblob3/ is WordPress
and you can make your theme/code as tidy as you want. There are no restrictions or issues caused by WordPress.
Even if you need to develop your theme from scratch: http://codex.wordpress.org/Theme_Development
Joe Jenkins answers:
If you want it really clean, try this:
http://codecanyon.net/item/wordcompress-wordpress-seo-compression/232594
John Cotton answers:
Hi Milford
Well, unless they've done something very clever that I've never heard of, it's not WordPress!
However, there's no reason why your WP output should be untidy. Start with your theme files and make those as neat as you'd like. Then work on your own functions and format the output as you want it. Plugins are harder since you've got to mess with their code, but still doable if you insist.
Having said all that, why are you so worried about how it looks? All those spaces and carriage returns and comments add to the size of the page being downloaded and therefore add a hit to the performance of the page (even if just a small one).
JC
John Cotton comments:
Milford
<blockquote>I can see it must be wordpress, just cleverly manipulated, if you look at the source code using firefox and click on the css file you can see the theme author and details.
</blockquote>
It's not WordPress - it's just build using the HTML made for a WordPress theme. They've left the comments in the CSS, that's all.
JC
Sébastien | French WordpressDesigner answers:
i don't know exactly what you want. I understand that you want tidy your code. So i suppose you tell about the appearence of the code.
So you can edit the file header.php for example and add comments, like in the code you have paste here.
So you can add something like that :
<!-- ////////////////////////////////// -->
<!-- // Start Stylesheets // -->
<!-- ////////////////////////////////// -->
and this will appeared in your code source
is it the response you want ?
Maor Barazany answers:
I'm not so sure that flatout.co.nz is based on WP.
Second, you can use some server settings in you virtual host to set for example an alias to wp-content/themes/yourtheme to be some alias you want, and then you can call all needed files with link relative woth this alias.
Second - you will always be needed to change plugins core code to no link to wp-content/plugins and instead to link to another alias for plugins.
Peter Michael answers:
[[LINK href="http://codex.wordpress.org/Theme_Development"]]http://codex.wordpress.org/Theme_Development[[/LINK]]
Peter Michael comments:
Not a WordPress site.
They use their own CMS, called [[LINK href="http://www.flatout.co.nz/index.php?pageLoad=56"]]Flatstick[[/LINK]]
Here's another site based on Flatstick: [[LINK href="http://www.healthdownsouth.co.nz/"]]http://www.healthdownsouth.co.nz/[[/LINK]]
Admin: [[LINK href="http://v3bh.flatstick.co.nz/admin/index.php"]]http://v3bh.flatstick.co.nz/admin/index.php[[/LINK]]
Eva answers:
they most likely edited the header.php from the theme´s folder (wp-content/themes/THEMENAME)
also there are functions to remove generator for example:
add this to your themes´s function.php
remove_action( 'wp_head','wp_generator');
here is [[LINK href="http://leetsee.com/very-good-read-the-case-against-wordpress-plugins.html"]]a list[[/LINK]] of a few things that can be removed
but the "index.php?pageLoad=" type url doesn't realy look like wordpress to me.
Denzel Chia answers:
Hi,
www.flatout.co.nz is not wordpress.
http://www.consumerlink.co.nz/index.php?pageLoad=30 is not wordpress
http://demo.templatesquare.com/wordpress/pixelblob3/ (demo from themeforest) is wordpress.
No need to argue with me about which site is WordPress or not, unless you want to pay me to teach you how to differentiate.
There is no such thing as carefully manipulated to look not like WordPress?!?!
It is easy to write tidy code for you wordpress theme.
You simply write it as tidy as you want!
There is no restriction as to how you write or space your template codes?!
If what you want is to remove certain WordPress auto injected code in your theme <head>
Then list it out here for experts to see, I am sure it is very easy to remove.
It is not easy to code a WordPress Theme, knowing html and css is not sufficient.
You need to know PHP, and how WordPress theme is structured, so that you can create a usable WordPress Theme.
So for a start, please learn PHP, know the basic before attempting to create a theme.
And please open up Twenty Ten Theme and understand every piece of code in it before attempting to create a WordPress Theme. You need to learn to gain knowledge, there is not shortcut to it.
And please do not buy any theme from theme forest and try to learn from it.
They are only good to look at.
I can say 90% of them has codes that are not WordPress Standard.
And many of them does not even have wp_head() and wp_footer() action hook.
Thanks.
Denzel
Denzel Chia comments:
One more issue.
<blockquote>
if you look at the source code using firefox and click on the css file you can see the theme author and details.
</blockquote>
If you know programming, these are called comments. Having these type of comments at the beginning of style file does not necessary mean it is WordPress. Any css file can have these type of comment.
I always use this type of comment structure, even for my Joomla projects.
<strong>
So here I go again, money cannot but you knowledge, please work hard and learn PHP, at the same time read the WordPress Codex and Twenty Ten Theme. Heed my advise, not need to pretend that you know when you actually don't.
I am very happy to guide you even if you don't pay me, as long as you are willing to be humble and learn from the beginning.
</strong>
Thanks.
Denzel
Denzel Chia comments:
Sorry for my typo and grammer mistakes!
Thanks.
Denzel
Vidyut Kale answers:
That site is not using wordpress.
But if you want stuff like that in your source code, simply edit the appropriate file - header.php - according to the example and add whatever decorations you would like as comments.
For example:
<!--/*********************************************************/-->
<!--/***** Isn't it a beautiful day today ***************************/-->
<!--/************Let is sing dance and make merry ***************/-->
<!--/*****You like looking at source code *************************/-->
<!--/************So I put this here for you ***********************/-->
<!--/*********************************************************/-->
If you want to put the blocks like "start stylesheets" etc, then you'll have to link your files in the header.php instead of "enque" them.
Jarret Minkler answers:
Actually, depends who you ask
Personally I think their code is an AWFUL MESS
<!-- ////////////////////////////////// -->
<!-- // Start Stylesheets // -->
<!-- ////////////////////////////////// -->
<link rel="stylesheet" href="css/style.css?v=1" />
<link rel="stylesheet" href="css/color.css?v=1" />
<!-- ////////////////////////////////// -->
<!-- // Javascript Files // -->
<!-- ////////////////////////////////// -->
<script src="js/libs/modernizr-1.6.min.js"></script>
<script src="js/libs/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='js/cufon/cufon-yui.js?v=1'></script>
<script type='text/javascript' src='js/Century_Gothic_400.font.js'></script>
<script type='text/javascript' src='js/cufon/cufon-replace.js?v=1'></script>
<script src='js/piecemaker/swfobject.js?v=1'></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<!-- SCRIPT -->
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
CSS then SCRIPT then more CSS ...
JS in header = BAD
Non-minified and compiled jquery + css = BAD ..
This is a pile of %^&*
Christianto answers:
They only convert wp theme to their cms... beside themeforest author can have HTML version and Wordpress version. Author may convert its Wordpress version to HTML version but forget to delete comment that will be used by Wordpress as theme name, author, description etc. HTML version can be converted to any CMS.
Please [[LINK href="http://www.flatout.co.nz/index.php?pageLoad=6"]]contact them[[/LINK]],
100% sure You will get answer 'Oh we are using flatstick' wanna get a licence?
Ask them why there is specific wordpress comment on their css..
To create tidy HTML on WP in this case in term of tab/spaces/indent, we have to manage output of <?php ?>, control spaces/tab/indent, and HTML code of your theme.
Seems easy but not if you don't know how PHP and WP work, the best thing that you can get is no php error. Not to mention if you use plugin, you wont have control of its output unless you edit the plugin, and wordpress itself creating output that are not tidy.
There are no plugin on wordpress that tidy up HTML output (in term of tab/spaces/indent). Maybe the tidy plugin you talking about means the plugin will fix if there are unclosing xhtml tag, so it will validate correctly.
I know one shortcut for your problem please use [[LINK href="http://wpquestions.com/user/profile/id/1709"]]this[[/LINK]] I'm 100% sure you can get your HTML wordpress output tidy if you want to learn it. Buy him some coffee/beer if you done.
Christianto comments:
If you found the plugin that tidy up Wordpress html output (structure,spaces,indent)
Please, tell me too...
ouch..