WordPress Plugin Development – Relate Posts as a Series Part 2

Posted in Coding, PHP, Plugins, Tutorials, WordPress • Posted on 16 Comments

So, we started our dive into WordPress plugin development with the first part of this tutorial where we talked a little about planning, basic plugin structure, custom post types, metaboxes and how to add custom functions to WordPress’s defaults actions.

Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.

All these things with a pretty practical example of how to make a plugin that will relate posts as a series.

So, let’s rock!

WordPress Plugin Development – Relate Posts as a Series Part 2 Read More

CSS Tricks for Smart Quotes and Tooltips

Posted in Coding, HTML & CSS • Posted on 9 Comments

The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).

But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.

Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.

So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.

So, let’s rock.

CSS Tricks for Smart Quotes and Tooltips Read More

CSS Counters – The Right Way to Organize Your Ordered Content

Posted in Coding, HTML & CSS • Posted on 17 Comments

It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D

So, let’s rock!

CSS Counters – The Right Way to Organize Your Ordered Content Read More

An Introduction to Object Oriented CSS

Posted in Coding, HTML & CSS • Posted on 13 Comments

With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.

There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

An Introduction to Object Oriented CSS Read More

How to Customize Twitter Search and Profile Widgets

Posted in Coding, HTML & CSS • Posted on 32 Comments

So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.

They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).

Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.

So, let’s rock!

How to Customize Twitter Search and Profile Widgets Read More

Getting Smarter Code with PHP Variable Variables and Variable Functions

Posted in Coding, PHP, Tutorials • Posted on 29 Comments

Oh, variables. Who doesn’t love them? They are such nice guys, you know. When you need something, just call $something and your value is there.

But something really cool is that you actually don’t need the name of the variable. You can use other variables to access a value of one variable.

For example, let’s say you have two variables $jude = "hey" and $hey = "jude". If you echo $$jude $$hey(yeah, double “$”) your output will be “hey jude”.

But, as you might be thinking it is not just about variables. You can name dynamic functions, methods, arrays, and almost anything you want to.

This time we will see some uses for it, with arrays, functions, classes and how this technique can help you write better code.

So, let’s rock!

Getting Smarter Code with PHP Variable Variables and Variable Functions Read More

jQuery Plugin: Table of Contents with Smooth Scrolling

Posted in Coding, JS & AJAX • Posted on 39 Comments

Hey guys, have you noticed that pretty box on WordPress codex that gives us a preview about what we can see on a page? So, I haven’t seen too many blogs use this kind of feature and it is really useful for our readers, since they can just skip to the content that they are interested in and avoid wasting time. Wikipedia has a table of contents that makes it easier for readers to skip around, right?

I’m not the very first to do something like this with jQuery. But our goal in here is to develop a complete jQuery plugin, from start to finish, with options, and that is easy to customize. And, of course, something that I hope is useful to you

So, let’s rock!

jQuery Plugin: Table of Contents with Smooth Scrolling Read More

Convert 1st Ideas from PSD to HTML [Very Detailed]

Posted in Coding, HTML & CSS, Tutorials • Posted on 20 Comments

In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Convert 1st Ideas from PSD to HTML [Very Detailed] Read More

WordPress Wp_Nav_Menu with Icons and Active Item Highlight

Posted in HTML & CSS, PHP, WordPress • Posted on 15 Comments

WordPress is a great tool, for sure, but as many other CMS’ it drives us into an “all standard” way of thinking, that is, you design things thinking that every element has to be identical to his brothers, same color, same style, same size.

How many WordPress sites with pretty menu icons do you know (with wp_nav_menu, not “static” menus)?  How many of them use a different color for some categories? Well, these little things make a big difference.

This time we will learn a simple way to customize our WordPress menu, without losing its wonderful admin options. We will be doing:

•   Home link in our wp_nav_menu that always gets current blog url
•   Customize each menu item as you want
•   Put pretty icons in our menu
•   Active item highlight

From now on, it is useful to have a little understanding about what wp_nav_menu is, and if you have a blank WordPress install, it is time to play with it ;)

So, let’s rock!

WordPress Wp_Nav_Menu with Icons and Active Item Highlight Read More

How to Create a Web Spy with a PHP Crawler

Posted in PHP, Tutorials • Posted on 52 Comments

Crawler, spider, bot, or whatever you want to call it, is a program that automatically gets and processes data from sites, for many uses.

Google, for example, indexes and ranks pages automatically via powerful spiders, crawlers and bots. We have also link checkers, HTML validators, automated optimizations, and web spies. Yeah, web spies. This is what we will be doing now.

Actually I don’t know if this is a common term, or if its ever been used before, but I think it perfectly describes this kind of application. The main goal here is to create a software that monitors the prices of your competitors so you can always be up to date with market changes.

You might think “Well, it is useless to me. You know, I’m a freelancer, I don’t have to deal with this ‘price comparison’ thing.” Don’t worry, you are right. But you may have customers that have a lot of competitors they want to watch closely. So you can always offer this as a “plus” service (feel free to charge for it, I’ll be glad to know that), and learn a little about this process.

So, let’s rock!

How to Create a Web Spy with a PHP Crawler Read More - unknown - unknown - US