5 Sneaky Ways and Means To Peek Into A WordPress Site

I have 5 main “ways and means” to learn HTML, PHP and CSS

Apart from reading tutorials by other clever people (self taught or otherwise), I like to learn things by trial and error.

Warning: This can take some time and if you are in hurry and don’t want or need to learn how to code, then find the code in a tutorial and copy and paste.If you want to try your hand at learning the hard way – but most rewarding – then you might like to equip yourself with some of the following tools.

1.  Use the Firefox Browser

If you aren’t running on Firefox yet – you need to. Get Firefox now or read Thesis Hacker’s article on browser statistics (scroll down to below the image).

Firefox has at least 10 distinct advantages over Internet Explorer…

• Faster Tabbed Browsing
• Free add ons that give you access to Firebug [more on Firebug below]
• Integrated Search Engine
• Popup Blocker
• Security
• Download Manager
• Blocking Images
• Cleaner Interface
• Page Previewing
• Less Hard Drive Space

2. Firefox Add On JSView

This allows me to view a site’s CSS and JS code sheets. I have a look at other sites’ code from time to time to see how they do things. If you peek into the back of sites using Thesis Theme you will recognise the “custom.css” file.

3. Firebug

I also use Firebug to see what the html and css is for a selected area.

If you hover over an area in the html part of Firebug, it will highlight the area that the code relates to. For example in the image below, I hovered over the “content box” line of code and it highlighted where on the screen the code related to.

If you want to see the code for that part, click on the “+” button to drop it down. When lines of code are dropped down ["-"], you can copy and paste into a text editor to customize for your own purpose.

If you want to see the CSS (Style coding), you can click on the relevant html (e.g. “content” – and look to the right of Firebug, under the ‘Style‘ tab. Anything crossed out is code that is disabled at the moment but still remains in the CSS file.

I’m not the best person to teach you how to use Firebug. I highly recommend Kristerella’s video on using Firebug.

4. View Selection Source

By simply marking a section on the page with the left mouse button (hold, drag and release) I can then right click and select ‘View Selection Source‘. This will give you a mixture of all kinds of code, including CSS, HTML, javascript, etc. This is handy to understand what the final code looks like when it is run together.

For example, I went to Kingdom Geek (creator of Thesis OpenHook) and marked a selection on his page that was interesting to me, something I wanted to know how to do so I could do something similar on my own sites.

I then selected ‘View Selection Source‘ to see what the code looked like.

Findings

You can see from the screenshot above, that he uses a blockquote and a blockquote class to style his blockquotes. If I go to his stylesheet I can see the custom code he uses – if it is in the custom.css file. I can be pretty certain it is because I know the site uses Thesis Theme and I am familiar with the common paths to common files.

This isn’t always the case though. Sometimes people change their master style.css file.

• If you use Thesis OpenHook plugin you don’t have to open/edit any files directly on your server/ftp.

So, there you have it. Some of my dodgy self-taught hacking methods to learn how to code and customize my pages. Many of my tutorials are based on the above methods – my investigation of how people do something I think is groovy.

You could also just copy and paste from some of the great tutorials that are out there, but sometimes learning for yourself is more fun.