Category : Code

Code

Accessible CSS

wordpress-themes-cssWhen I needed to hack a WordPress theme and I got my hands dirty with CSS code, sometimes I came across with in-line written CSS code i.e. every CSS selector occupied only one row. I found this practice very ugly and not scannable. I was used to CSS written in the classic way where every value is written in a new line. So, I would often break the single lines into multiple ones to distinguish them better. But this did not last forever. What happened?

Not very far in the past, I came across a article about single line CSS, where Steve Smith, the designer at OrderedList.Com had written of the same topic. He had gone thought the same dilemma I went and his conclusion is no different from mine. He says:

But imagine now that you have over 200 selectors, each with a laundry-list of attributes. That’s quite a mess to search through. My issue with CSS files like these is when they get large, it becomes very difficult to scan the document for a particular selector. They’re all separated by loads of attribute and value pairs. So what if we took out that separation, and put each selector, and it’s attributes and values all on the same line?

Let’s look at a live example taken from a site I have been developing lately. This is the way the code would look like if it was coded classically.

h1{
    float: left;
    width: 120px;
    height: 40px;
    margin-top: 35px;
}
h1 span{
    display: none;
}
h2 {
    padding: 0 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 20px;
    color: #159089;
    font-weight: 200;
}
h2 a {
    color: #159089
}
h3 {
    padding: 0 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #159089;
    font-weight: 200;
}
h4 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 24px;
    color: #d21d1d;
    font-weight: 500;
    text-align: left;
}
h5 {
    padding: 10px 0 0 0;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #4b4141;
    font-weight: 500;
    text-align: left;
}

And this is actual code I have coded of the site using the single line method.

h1 { float: left; width: 120px; height: 40px; margin-top: 35px; }
h1 span { display: none;  }
h2 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height: 20px; color: #159089; font-weight:200;}
h2 a { color: #159089; }
h3 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 18px; color: #159089; font-weight:200; }
h4 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:22px; line-height: 24px; color: #d21d1d; font-weight:500; text-align:left; }
h5 { padding: 10px 0 0 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:16px; line-height: 19px; color:#4b4141; font-weight:500; text-align:left; }

Note the length of the first sample and keep in mind that this is only less than 5% of all the CSS code I wrote for that site. Can you imagine how long the file would be if it weren’t in a single line and how difficult it would be to look for a certain selector to edit? You would spend more time browsing up and down thought the code rather than actually writing or editing it. That is why I chose to write all my CSS code in single line selectors method, so that I can speed up my work and spend less time looking for selectors in a super-long CSS file.

So, why not give it a try yourself? I think it is worth trying and I strongly hope you will get to love it as I do now. What do you think?

Read More
Code

Pack your WordPress theme with the necessary CSS

WordPress themes are being a great online resource for everybody to use, modify and share. This applies to GPL themes only though. However, in order to offer our online neighbors good themes that they will be happy using, theme developers, including me, should take care of some peculiar aspects in themes such as the use of CSS code. Along with WordPress theme evolution, some default CSS code needs to be included in very theme so that certain in-built features work well. This is mostly the case of images, but not only.

In WordPress 2.5 several classes for aligning images and block elements like DIV, P, TABLE etc. were introduced.Every theme should have these CSS classes – you can alter the style if need – in its style.css. The same classes are used to align images that have a caption, introduced in WordPress 2.6. Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Additionally, there are a few more WordPress CSS classes that you may optionally wish to style because WordPress generates them by default. I make use of most of them in my themes and I suggest very body uses them in their themes. There they are:

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

Did you find this information helpful? Do you have anything else to add? Your opinion is very much appreciated.

Read More
Code Design

UKlocum, my Latest WordPress Freelance Project

One of my many WordPress freelance projects I am working on is UKlocum. This is one of the many projects I have received from my dear client from Poland, Greg. When Greg contacted me for this project explaining what he wanted to do, he asked me if this could be done with WordPress. He had seen the potential of WordPress in other previous smaller projects we worked on. Before that, he had thought of getting it custom made from scratch, which would have cost him too much. So, I told him WordPress could handle it and we decided to go with WordPress. This site was a real challenge in terms of functionality and all this post is about is that WordPress handles perfectly CMS websites.

The Theme

uklocum

UKLocum Website Preview

This project was pretty urgent and I could not afford to design a new theme from scratch, having a lot of other works in hand.  So I decided to go for a free WordPress theme and tweak it to fit my needs. I looked around and I can say that the theme community of WordPress is doing a great job. What I decided to go for is the Magazeen theme that was featured at Smashing Magazine too. Do you want to know what I tweaked? Read on…

Theme Code Cleaning

As you may already know, coders code differently. That is why getting your hands dirty with others people’s code is not a very enjoyable experience, moreover, sometimes it is a real pain. That was the case even with Magazeen which I expected to be better coded. The problem with code was that there where redundant use of DIVS and not logical cascading of CSS. This is my humble opinion – check it yourslef to be sure.

Most of code clearing was easy as it consisted in just removing functionality that the theme came prepacked with such as comments form, advanced widgets, thumbs gallery other elements that I cannot recall now, but it is quite boring and frustrating in other tasks as the drop down menu integration below.

Suckerfish drop down menu integration

The Magazeen theme did not come with a drop down menu, so I needed to integrate one as my client, Greg, required it. Not going into much trouble, I decided to use the Suckerfish Drop Down Menu which I had used several times previously. Because the code was messy, the most difficult part was fitting the theme code to the menu rather than integrating the drop down menu to the theme. However, it ended to be a success.

Custom Banner Integration

The custom banner integration consisted in removing some code from the banner section and placing the banner image there. Also, to help SEO of the site, I used a CSS image replacement techinque for the logo so that the human fisitors can see the nice image logo whereas the search engines read the given text wrapped in <h1> html tags.

Color Combination Alteration

Pawel, my client’s graphic designer, suggested that we used another color combination that would go better with the logo and banner colors. I implemented that color combination and it resulted in  another success.

Welcome Guest or User

Under the menu, I integrated a piece of PHP code from WordPress to welcome a guest visitor and to tell them to log in or to register and also to greet a registered user and to allow them to log out from front page or any other part of the site, so that not to make them to spend time and click to go to admin panel to log out.

Extended User Register

Because of the nature of the site and the needs of my client, he asked me if we could extend the register form with other fields. So  I did, using a great plugin called Register Plus. This is a very feature reach plugin which would allow you do almost anything with your register page, from having your custom logo to adding a lot of functionality and fields. I want to immensely thank the plugin’s developer for offering such a great plugin to the WordPress community.

Events Manager

The most impressing part of the UKLocum is the Events Manager. The Events Manager is a plugin developed by Davide Benini. It allows you to manage events specifying precise spatial data such as location, town, province, etc. It allows your visitors to book their participation in listed events. In my opinion it is the best plugin out there for event management.

When my client, Greg, saw it, he was enthusiastic about it. However, we had to face a challenge with the events. We needed to have people register first for the site, after that they would be able to book the events. Taking in consideration that the plugin developers have fulfilled almost any need in functionality terms, I found the solution fast enough. I employed the HidePost to accomplish that task, just another great plugin out there. I hid the booking form from not logged in visitors, telling them to log in or register, if not, to be able to book the event. That was the happy end of our next challenge.

Bottom Line

What would be the last words of this long boring post? Hmmm! As you could have already deducted from reading this post, WordPress is being more and more important in nowadays web environment. Also,  running WordPress freelance business (perhaps that’s not the right collocation) is a great way to make a living by making money online. The last but not the least, if you need a custom WordPress theme or other WordPress services and, if you are looking for a professional and reliable WordPress freelancer, look no further than my contact page.

Don’t forget that your opinion is most appreciated – please share it below.

Read More
Code

How to find a WordPress category ID

Many WordPress themes, especially those in magazine style, need to have some configurations in terms of category IDs in order to show things properly. They will often ask you for a Category ID in the theme option panel. And you might be wandering how on earth to find those IDs.

That is, in fact, a quite easy task – even though it might be a little tricky. This post is all about those IDs and how to find them in no time. Here we go:

  1. On your dashboard, under the Posts menu, click Categories;
  2. Keep the mouse over the category whose ID you need;
  3. Look at your browser’s status bar and you will see something like this in the shown URL: tag_ID=160all you need is the number.

So that you know, this is true for WordPress tags and other custom taxonomies you might be using in your site – the ID finding process is the same.

This is all for this time. I hope you enjoyed it. And good luck!

Read More
Code Design

Master: Premium GPL WordPress Theme

As announced in the introductory post of Master WordPress theme, I am releasing my first ever free WordPress theme. I am very happy to have achieved this and I am very hopeful that 2009 will be a great year of success for my WordPress freelance experience. Below I have taken an two paragraphs from my introductory post for the master theme I am releasing.

Do I have to pay for the theme?

No, the theme will be available for free download and usage. The theme in fact is being released under the GPL license which is the same license that WordPress uses. The theme will also have free updates and upgrades forever. Also, I hope we guys build a great support forum for this theme and others to come which will also be free to access, ask and answer.

What do I have to pay for than?

You might never have to pay for anything. But, in case you need help to set up the theme, configure the plugins etc, you might want to buy one of the five (5) service packages that will come along with the theme. These packages vary from setup to theme enhancements and even PSD to the actual theme. More information about this topic will come along with the theme release.

Master Theme Features

  • Modern and beautiful web typeface.
  • Tableless design and 100% CSS-based layout.
  • 2 columns of fixed width.
  • Widget Ready.
  • XHTML 1.0 Transitional valid.
  • CSS 2.1 valid.
  • Search Engine optimized coding make wise use of h1, h3, h3.

Master WordPress Theme

Preview and Download

Support and Customization

Master Theme Pack 1 Pack 2 Pack 3 Pack 4 Pack 5
Theme download Yes Yes Yes Yes Yes
Updates and upgrades Yes Yes Yes Yes Yes
Knowledge base Yes Yes Yes Yes Yes
Forums support Yes Yes Yes Yes Yes
Site/Blog Setup Yes Yes Yes Yes
Plugin selection and configuration Yes Yes Yes Yes
Email Support and on-site support Yes Yes Yes Yes
Color and font customization Yes Yes Yes
Structure and look customization Yes Yes
PSD to Master theme conversion Yes
Fees Free $39 $79 $99 $149

Installation

STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files.
STEP 2. Upload the theme to your /wp-content/themes/ directory.
STEP 3. Now go to Appearance >> Themes and activate the “Master” theme.

License

Master theme is licensed under the GPL. It may be freely modified and copied as long as the license stays GPL. This means that you may use it for your personal and commercial projects and you may also make any changes you like.

Change Log

2009-01-07: Initial 1.0 release.

Read More
1 4 5 6 7 8