Category : Code

Code Design

Blog Design: WebVideoMax.com

Andrew Kelly contacted me for a kind of business blog project that he was working on. After I showed him some of my previous works and we agreed on the price, I began designing a WordPress theme for him. He had previously chosen to use as a theme the semilogic theme framework. Well, his decision made me suffer until I suggested him that I developed the theme for him from scratch. He agreed and on this we went on. This project took a little bit long as I was working on other projects simultaneously. However working with Andrew was a great experience.

Design

When Andrew contacted me, he showed me a couple of sites that he wanted his blog to look like. He wanted something fresh and have a web 2.0 feel. Some guys might argue that web 2.0 means nothing, however there are a lot of designers and blog writers that have listed out the features of web 2.0 – but this is not the point of this post. Let’s focus on the design process. I used an heavy blue color throughout the blog with some fresh web 2.0 effects. I did all this with Inkscape, my favorite vector graphic design application. I cannot say I am a great designer, but I can reach high quality in design if clients describe me clearly what they want.
webvideomax

Coding

As I said earlier, the early coding process was very painful. After we decided  to have the theme developed from scratch, it was a very nice experience as coding is the part I like most. I had to work with XTHML, CSS, PHP with WordPress flavor.

The theme is coded in tableless XHTML/CSS. At first it was pure and valid, but after my client, Andrew implemented Awaber subscription code into it, it turned to have some validation errors. It is not a situation I like to be in, as I claim I code only valid talbleless XHTML/CSS websites and WordPress themes, but I cannot interfere with my clients choices.

Layout

The theme has a  two column layout. It has a left main column where the blog content is placed and a right wide sidebar. On front page it has a big welcoming video before the fold under which four other posts queried according to categories are shown. It is a nice simple layout informative layout.

Widgets

The theme has a fully customizable, widget-ready sidebar. Widgetizing WordPress themes is a pleasurable experience for me  and I could not leave it unwidgetized even though widget are little employed by my client, Andrew.

Testimonial

After a lot of frustration working with many Web Designers it has been a real refreshing change to work with someone like Baki, his constant follow up and willingness to over deliver on all levels has made a huge difference to our productivity and our web business bottom line. Nothing is ever too much trouble for Baki which makes him a real pleasure to work with. I just wish all our team could be as reliable and project focused as Baki! Andrew Kelly of ClickSmartMarketing.com

Conclusion

This is all I could write down about my experience with Andrew Kelly. I would love to hear your thoughts about this theme. Also, please consider subscribing to my RSS Feeds to have the possibility to read and view more great articles and projects. In case you need a WordPress theme, you can drop me a line using my contact page. If you are not sure, please have a look at my portfolio to see more works of mine. Thanks for reading!

Read More
Code

Why You Shouldn’t Use Tables for Web Layouts

During my whole lifetime as a web designer or better as a front-end developer, I have coded only one site using tables for layout, the first one. It was the time when I had just began to do web stuff and I did not know very much about CSS and its potential, if not nothing at all. After that, I got introduced to CSS and ever since I have never used table in any of my site development projects I have worked on. I thought it would be a good idea to write something about this subject for the guys who still use tables for web design layouts, especially those that develop wordpress themes. So, let’s begin:

1. Tables are hard to code and difficult to maintain

Let’s suppose you are a hand-coder, how do you manage to write all those <tr>’s and <td>’s without errors? It is a common error when you code with tables to have missing tags or misused ones. It is even more difficult when one uses a WYSIWYG. WYSIWYG editors operate with table layouts and usually, the code that they generate is very messy. The same occurs when you slice a design with Photoshop or GIMP. Using CSS, you will code at least half less tags than coding with tables. Managing <div>’s through CSS is a far more easier, fun and creative process.

2. Tables are slow to load

The web site created in tables will take more time to appear on the screen

that CSS based one.When using using tables, the page won’t show up until the browser parses the last closing </table> tag. Moreover, the more table you nest within each other, the more the content will break until the images and text figures out where they belong to in the site. Well, this is a solved problem with CSS, just tell it where to be and there it will.

3. Tables can hurt your SEO

The more code that is in the way, the more junk they have to plow through to get to your content. Nested tables, which are usually used in table-based website layouts, would hurt the content that is inside it. There are more HTML tags than content.

There is another widespread idea about tables that use left-hand navigation (very common in table layouts) hurt the SEO, by telling the search engines that content is less important that navigation which appears before the main content in the HTML. This will distort search engines and mislead them in indexing your site. On the other hand, with CSS, you can make the navigation bar appear on top, but you can put it at the bottom of your HTML.

4. Tables lack accessibility

The same as it hurts SEO, it distorts screen readers. Most screen readers read pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation. Through CSS, you can display the anything on the top, but leave the most important part at the top of your HTML.

5. Tables don’t print well

Another problem with tables is that they don’t print well. With CSS, you can use a print style sheet to give another look to the page. You can also have elements that only show up when rendered to a screen, but not to a printer such as headers and footers. CSS is great for printing.

6. Tables make site redesigns much harder than semantic HTML+CSS

Through CSS, you can twist your site look so much, that you won’t resemble with the old site at all. The most important part is that, all this can happen without touching the HTML part at all. You can even have several different skins for your site and allow your users to select one of them. This can happen only in dreams, if you are using tables. You cannot alter the layout at all, expect colors and font size, when you are using tables, even though you might be using CSS. Get rid of tables.

7. Conclusion

It might be hard to make CSS-controlled layouts cross-browser compatible, which is often used as the main argument against switching to pure CSS. True. But as soon as you finally do it, the experience is great. The more CSS tricks you learn, the funnier it becomes to test them and play with them to see what other effects you can achieve. Tables could never be so much fun.

Read More
Code

WordPress Bug: Tags do not appear under WP_Query

WordPress has been perfect and bug-free for me. However, I discovered one lately. Firstly I came across this bug when I was developing an Gawker-style WordPress theme for a client of mine. I used custom WP_Query loops several times there and I was asked to display tags inside them too, the way Gawker does. This did not happen, of course, that is why I am writing this post. By that time I thought it was my fault that tags did not appear.

A couple of weeks ago, I coded a new theme for my blog. I used several custom loops there too, powered by the famous WP_Query. When I tried again to show the tags inside them, they did not show up. That made assured me that it was a bug. To have more context about this, please have a look at the following WordPress loop:

{code type=php}

<?php $my_query = new WP_Query(‘category_name=featured&showposts=1’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[$post->ID] = $post->ID; ?>

<div class=”featured_post” id=”post-<?php the_ID(); ?>”>

<img src=”<?php echo get_post_meta($post->ID, ‘Featured_Image’, true) ?>” alt=”” id=”featured_img” />

<h3 class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a>  </h3>

<div class=”meta”>By <strong><?php the_author();?></strong> &raquo;

<?php comments_popup_link(‘0 comments’, ‘1  comment’, ‘% comments’); ?>

<?php the_tags(); ?>

</div>

<?php the_excerpt() ?>

</div>

<?php endwhile; ?>

{/code}

As you can see, the tags code is included in the loop, but nothing appears. This does not work only under the WP_Query powered loops, whereas in a normal loop, it works. I would appreciate very much that everybody contributes to make this bug known to the WordPress team as soon as possible so that they can have it fixed. Thanks very much!

Read More
Code

Upgrading WordPress in Ten Easy Steps

It came to my mind to write an easy and short how-to to explain for not very techy people the way to upgrade their self-hosted WordPress, when one of my clients asked me why her admin interface was showing that she should upgrade WordPress to the latest version. She thought she had already done that. In fact she had, but to the version 2.5. Now it is a long time WordPress version 2.5.1 is available. Well, this can help my client to upgrade WordPress herself, but I would love also this this help hundreds of others. Enough with the words, let us begin.

Step 1 – Create an FTP account: Many know what FTP (File Transfer Protocol) is and already have their accounts. Well, those who do not have one can create it in their Administration Panel that their web host has provided them with. I hope you FTP-have-nots find this process easy.

Step 2 – Download an FTP application: There are many. To keep it short I recommend FileZilla , free/open source and easy to use. After you download it, you enter your FTP account info in it and have the files of your WordPress listed in it. To use it is very easy, as i previously said. You have there two environments, the online and the offline one. To upload or download by FTP just drag and drop files or right-click and use the menu.

Step 3 – Export the information to XML: This is done in case something goes wrong with the upgrade. This is not a real database backup, but you have your articles and comments at safe after you do so. To do that you just have to go to Manage => Export . Than follow the easy steps that it provides and export a copy of your content.

Step 4 – Deactivate all plugins: In your admin panel, under the Plugins menu, deactivate all plugins that you have there. Some plugins may conflict with the upgrade process because of the changes to WordPress, so this is another must.

Step 5 – Download the latest version of WordPress: To do so, just go to wordpress.org download section and get the latest version of WordPress in .tar or .zip. Make sure that you download goes fine because if not all the files are downloaded or there have been problems, you might have problems to run the new version properly, if not have errors all around.

Step 6 – Delete the old WordPress Files: You have to do so, unless your upgrade will not be successful. If you try just to overwrite the previous files, you will have problems as not every single file gets overwritten correctly. Keep in mind, you should not delete or overwrite in any way this files and folders :

  • wp-config.php file;
  • wp-content folder; Special Exception: the wp-content/cache and the wp-content/plugins/widgets;
  • wp-images folder;
  • wp-includes/languages/ folder–if you are using a language file;
  • .htaccess file–if you have added custom rules to your .htaccess;
  • robots.txt file–if your blog lives in the root of your site (ie. the blog is the site) and you have created such a file.

Step 7 – Upload the New Files: Upload the right files from your computer’s hard drive to the appropriate WordPress folder on your site. Make sure that you do not overwrite the files and folders mentioned at step 6.

Step 8 – Upgrade Database Structure: Do not be afraid, this is very easy. Just do so: If WordPress is installed in the root directory, point your browser to: http://yoursite.com/wp-admin/upgrade.php. If WordPress is installed in its own subdirectory called blog, for example, point your browser to: http://example.com/blog/wp-admin/upgrade.php. And wait for the upgrade success message.

Step 9 – Update Permalinks and .htaccess : Update your permalink structure, if you like it, into your .htaccess file. In your Options->Permalinks panel update your Permalink Structure and, if necessary, place the rules in your .htaccess file. This will happen when the .htaccess is not writable; you should have a tool to paste the code into it or otherwise it should be writable.

Step 10 – activate your Plugins: Now it is time to activate your plugins that you need or like. You can do that the same way back as you deactivated the plugins. It will be a loss of time to go on with this point.

And we are done. I hope you find this little effort of me to serve the community a good one. Any feed back would be very appreciated. Thanks!

Read More
Code

Minimalist WordPress Theme Development

When I began to explore the WordPress theme code at my beginnings with WordPress, I came across a problem that I could solve only after a while. At that time I had no idea of minimalist web design, yet I wanted to stick to a minimalist web development habit, i.e. code less and have less files. While coding less can be grasped immediately as a saver of time, bugs and nerves, minimalist design is harder to understand in nature as it has to do more with arts. Even though now I am able to color some pixels on the screen about minimalist web design, it is not what I intend to discuss here. I want to share with you what I kept for a invention at the time my PHP grasp was very immature.

It was the case when I wanted to have most WordPress template files reduced in one as the case of the classic WordPress theme. In other words, I wanted to use only the index.php file which would do the role of home.php, singe.php, page.php etc. But I wanted to have a default excerpt option for all of them except singe.php and page.php. This made me have an hard coding time, but the pleasure of solving it was great. My “invention” is below:

<?php if ( is_single() || is_page()  ) {
    the_content();
} else {
    the_excerpt();
} ?>

That’s it. I just wanted to share this with you and why not be a little helpful. I would love your feedback. Please, drop me a line. Thanks!

Read More
1 5 6 7 8