For those who just met up with WordPress, Profile Builder is WordPress registration done right; it lets you customize your website by adding a front-end menu for all your users, giving them a more flexible way to modify their user-information or to register new users.

Although we added a few new things (like 1 more custom redirect, and some usable parameters in the userlisting), the main feature we worked quite a lot on is redesigning the plugin’s functions from custom PHP functions to WordPress functions. This should solve a lot of the black avatar issues we read on the forums about.

We added the possibility to have a user defined meta-key name. When you add a new extra field you still get the custom_field_x default meta-name, but now you can change it according to your liking.

A few other useful things we added include filters (you can see a sum of them here), and a userslisting parameter [wppb-list-users visibility="param"] where param can be: public (so that anyone can view the userlisting, even visitors not logged in), or restricted (only logged in users can see it).

A few things we would like to mention regarding this version:

1. The .mo and .po files in any language other then English are most of the time out-of-date as these are supplied to us from our users. If you have a translation you made (or updated) and want to share it with the rest of the community, you can send it to gabriel@cozmoslabs.com. This also regards any future updates of Profile Builder.
2. Depending on the kind of update you make (automatic or manual) we saw that there were cases when the meta-names didn’t appear in the extra fields table. We built in a function to solve this, and to preserve the backwards compatibility with other versions of the plugin, but if you see some columns are missing (even though the column-heading is there), please make sure you deactivate and reactivate the plugin and see if that solved your issue.

UPDATE:

There was a minor bug regarding the way one could insert html links into the “agree to terms and conditions” checkbox, which is now fixed with a proper text-display. Version 1.1.14 should be available for download.

Related posts:

1. Profile Builder version 1.1.6 has arrived
2. WordPress Profile Builder: a front-end user registration, login and edit-profile plugin
3. Profile Builder Pro is WordPress Registration Done Right

You can find a good collection of css snipets here. Most shapes use css 3 properties but there are a few useful ones that do not require css 3 so you don’t have to worry about browser compatibility.

How to create a triangle with css

#right-triangle {
   width: 0;
   height: 0;
   border-left: 60px solid red;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
}

The css behind it is pretty simple but what I wanted to find out was why did it work, and with a bit of research I managed to figure it out!

Understanding how borders are drawn by the browser

Let’s start with a basic example. A 30px square with 1px solid black border:

#square {
   width: 30px;
   height: 30px;
   border:1px solid black;
}

So the result is what we would expect but there is one thing that should be noted: border is drawn outside of the element so the shape has 32px x 32px. Basic stuff so far.

Let’s increase the border width to 60px.

#square {
   width: 30px;
   height: 30px;
   border:60px solid black;
}

Again nothing special, and the shape has 150px x 150px now.

But what happens when all the borders have different colors?

#square {
   width: 30px;
   height: 30px;
   border-top:60px solid green;
   border-right:60px solid blue;
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

What most people don’t realize is that borders are drawn at an angle where they join, as you can clearly see above. This is the main reason why we can create triangles with css, but let’s fill in the remaining steps.

Let’s make triangles

What if we give a width and height of 0px and just leave the borders?

#square {
   width: 0px;
   height: 0px;
   border-top:60px solid green;
   border-right:60px solid blue;
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

We are left with a 120px x 120px shape composed of 4 triangles corresponding to the 4 borders. It has 120px width because both left and right borders have 60px each and 120px height because both top and bottom borders have also 60px.

If we focus on the red triangle we see that it has a 120px left base equal to the height of the shape (top border plus bottom border) and a 60px “height” equal to half the width of the entire shape ( or equal to the left border’s width).

Lets start removing triangles from the shape except the red one. From the paragraph above we see that the blue right border doesn’t really affect the red triangle. So let’s just remove it.

#square {
   width: 0px;
   height: 0px;
   border-top:60px solid green;  
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

Our shape now has 60px by 120px and the red triangle is intact. That’s a relief We can not remove any more triangles because the red one will be affected but we can make them transparent:

#right-triangle{
   width: 0px;
   height: 0px;
   border-top:60px solid transparent;  
   border-bottom:60px solid transparent;
   border-left:60px solid red;
}

Mission accomplished! We only have the red triangle, but it’s not exactly the same as the first example. This one has a base of 120px and height of 60px and the first one had 60px base and 60px height. As we previously said the base of the triangle is equal to the height of the shape, so let’s reduce the height. We do that by modifying the width of the top and bottom borders in half.

#right-triangle{
   width: 0px;
   height: 0px;
   border-top:30px solid transparent;  
   border-bottom:30px solid transparent;
   border-left:60px solid red;
}

We are finally done!

I hope that this article answered your curiosity, if you had any about css triangles.

Related posts:

1. Create an “About the author” area for Thematic
2. Add a search box to the thematic menu

(a-kĭz-mĭt)

Akismet is an anti-spam filter for comments. If you visit the website, Akismet is described as “possibly the best way in the world to protect you from web spam”, which from my experience is not far from the truth.

However, with over 9 million websites that use Akismet on a daily basis, questions about privacy and differences between the personal and commercial account are bound to appear and Pete was really open to answer a few of them.

Akismet filters out your comment and track-back spam for you, so you can focus on more important things.

Question: Tell us a bit about what you do over at Akismet and Automattic.
Answer: I work with the Premium Services group at Automattic, which is responsible for VaultPress, VideoPress and Akismet.

Question: What are there any limits on the free account?
Answer: Yes, as stated in our ToS, each Personal API Key should be used only on one site, and with no more than 80,000 comments/month. (There’s no restriction on the number of Personal API Keys that someone can have, however).

Question: Does a site that displays ads fits under the Commercial account?
Answer: I think your question is the wrong way around. Can a site with ads ever be under a personal account? Absolutely. Personal doesn’t mean you can’t make any money at all — just that it needs to be for a personal site. If you make beer money from some Google AdSense, that’s great — we have no desire to take that off you.

Question: Will Akismet enforce users to move from Free to Commercial (of course, if they are using it for commercial sites)
Answer: If we notice a site or an API Key that is blatantly abusing our Terms of Service then yes, we absolutely will ask them to move to a paid subscription, or stop using Akismet. We always give plenty of notice.

Question: Will Akismet add a back charge in case of users that should be under Commercial but are still using the Free account.
Answer: We’ve never asked anybody for back payments. I don’t expect that we’d ever start either.

Question: Anything else you might want to mention to Akismet users?
Answer: Akismet now filters close to 2 billion pieces of spam every month from over 9 million websites. That takes a lot of resources to keep the service up and running reliably and with the accuracy levels that we have. Some people seem to think that the service should be free — we simply couldn’t afford to do that… so somebody has to pay something. I’m always open to ideas about how we could structure our subscriptions better, but this is the best and fairest we’ve been able to come up with to date.

Conclusions

While Akismet isn’t perfect for everyone, I think they’re doing a pretty good job keeping spam away from millions of blogs.

Other solutions exist like Anti-Spam Bee (I’m currently using it and I’m happy with it), but they are based on some smart css/javascript/php tricks and mostly work because spam-bots are stupid.

As the spam-bots continue to increase in complexity the only thing that will stop it will be human curation and machine learning. The only way to achieve something like this is to use a centralized service like Akismet or if some smart guy/gall will go and build a decentralized system similar to BitCoin. (although I might be talking about fairy tales here since I don’t know how BitCoin really works)

No related posts.

WordPress Developer Tools

While this didn’t always work out as expected, we’ve tried to push for these goals to the best of our abilities and tried to “Do The Right Thing” as often as possible. Out of our efforts we ended up with two cool projects: BareSkin – a WordPress Starter Theme and Custom Field Creator – a easy to use class to create Meta Boxes for posts, pages and custom post types.

By building these WordPress Developer Tools we hope to save time and energy on our projects and create a solid base for more complex themes and plugins.

Both projects are in a ALPHA stage but stable enough to be of real use to you as well. I’ve been using both of them in client projects and I’m really happy on how they turned out.

BareSkin

Is a HTML5 WordPress theme to jump-start the development of another full-featured theme.

When we started developing custom themes for our clients, Thematic saved us a lot of time. We didn’t have to worry about all the things WordPress needs inside a theme and just used Child Themes to style and hooks to add custom functionality.

It all worked well up to a point. You see, the more custom functionality you need, more code goes inside functions.php. We ended up with thousands of lines of code inside functions.php on some of our more complex projects. Once you start unhooking existing functionality and hooking your own, you stop saving time and becomes a BIG pain in the butt to get anything working well.

Our first step away from this was creating our own internal framework. I didn’t like the direction Thematic has taken so I started looking elsewhere for inspiration and guidance. As it happens, Justin Tadlock felt the same thing about frameworks and released Hybrid Core – a WordPress theme development framework for creating solid parent themes.

We used Hybrid Core and created an internal framework, kept Thematic’s awesome XHTML structure, but ended up creating our own framework with the same problems as Thematic or any framework out there: we still used hooks and filters to add functionality inside templates.

Somehow that felt wrong to me so after a few projects with it we ditched it and I started looking again, this time by creating a document with the requirements of the theme that fit well with our web-development process.

BareSkin requirements:

• NOT a theme framework. Think of it as a parent theme with limited support for hooks and filters. Modifications should be made by forking it and creating a new theme, not through Child Themes.
• Functionality should be added through a modular system ( like add_theme_support )
• The loops should be included through get_template_part so template files are as easy to understand as possible.
• Limited Admin Panel – only functionality that might belong to a theme, everything else delegate to plugins.
• When possible use conventions over configurations
• The theme will support 3 layout structures through css includes: 2 columns right-aside, 2 columns left-aside, 3 columns content-in-the-middle similar to Thematic as well as a responsive.css file

We’ve used ToolBox’s HTML structure, took part of the functionality from Hybrid Core and then mashed it all together to create something really cool.

This is not a finished theme. That’s why for now it’s only available via GitHub and will not be submitted to the theme repository for now. Work still needs to be done to the existing CSS structure and you might find inconsistencies in the code.

Custom Fields Creator

Custom fields have been in WordPress since a long time. They are an absolute must when it comes to custom post types or even storing extra information regarding a certain page.

However, the UI to manage those fields is somewhat lacking in functionality. You can only add key => value pairs. No labels, no descriptions. The cool thing is that we can create Custom Meta Boxes and save that information in custom fields.

Default Custom Field Interface.

While creating Meta Boxes is really cool, it’s also something we can take a bit further and abstracted a metabox class so you could create them with a few lines of code.

Taking the idea a bit further, what we really needed was repeater fields with our meta boxes.

There are a few cool plugins that allows you to do just that (ACF and Magic Fields 2 come to mind) but we needed something that was easy to embed in custom client plugins where the client didn’t need access to the structure of the fields, particularly since we’re using standard WordPress functions to output the information in a page template for the front-end.

Custom Fields Creator UI to create the testimonials on wpMail.me

Here’s what Custom Fields Creator dose:

• Easy to configure. You just need to setup two arrays (more info on the GitHub readme file)
• Support for Repeater Fields Metabox. This is the main reason we built it. Let me give you an example. For a particular client we needed to create a “The Team” page. Each team member has a name, title, email address and phone number. Initially all information was added in the Visual Editor by us, but when the client updated that information he easily broke the HTML and the formatting was gone together with the sidebars since he didn’t close a tag . Having the information nicely separated in input fields and listing it on the front-end using get_post_meta made it easy for the client to update his information and we didn’t have to it for them.
• Drag and Drop to sort the Repeater Fields.
• Easy to create custom Meta Boxes with multiple fields each (let’s say you need a project extra information like: budget, timeframe  and team members)
• Support for all input fields (WYSIWYG is coming soon)
• Image / File upload supported via the WordPress Media Uploader (at this point the files aren’t attached to the post and are available just in the media library but we’re thinking have to possibility  to chose if needed)
• Possibility to target only certain page-templates (there is no point in having “the team” metabox shown on the “Our Clients” page now is it? ), target certain custom post types and even unique ID’s.

There are other things on the list for it, proper documentation is one (you’ll find a readme file on github for now), WYSIWYG, validation and tweaks to the UI. At this point is just important to let people know about it and hopefully someone will find it useful.

Future Plans

I think at this point creating proper documentation is a priority for both projects. For BareSkin we need to finalize the CSS so it’s easy to build upon it, as for Custom Fields Creator tweaking it’s UI is something I want to do most. I think the UI and ease of use will be THE big feature for both projects and not adding to much extra functionality. They don’t have to do everything, just need to give you a head-start and let you focus on the fun stuff.

I haven’t coded any of them, my colleague and good friend Madalin Ungureanu did, but I’ve created the initial requirements for both, did a fair amount of testing and currently working on improving them.

I believe it’s very important to have solid WordPress Developer Tools that allows you to build other cool stuff easily without having to do a lot of copy-pasting between projects. Hopefully they will be of help to other developers as well.

If you do end-up working with any of them I would love to hear about it in the comments.

Related posts:

1. Street WordPress Theme
2. The new Smarter and WordPress 3.0
3. WordPress Automatic Updates Based on Folder Name. Is That a Problem?

What I’m hopping to achieve with this post is to drop the technical jargon for a minute and explain in down to earth words what is WordPress , how can it help you, what is WordPress.com, what’s a theme and why do you need plugins.

What is WordPress?

WordPress is a FREE web software that anyone can use to create and update a blog or web-site. You can install WordPress on your web-server (or hosting account) and then use the user interface to create pages, upload images or write articles.

Most importantly you can manage your entire website without any technical knowledge or the need to write code. Everything is done from the admin panel where only authenticated users can access and modify your website.

WordPress login screen. Only allowed users are able to modify your content.

 Some of the things WordPress let’s you do are:

• Create new pages for your website or blog (like a About Us or Contact page).
• Create menus so your site visitors can find the way around the site and discover relevant information.
• Write articles in a chronological order so the newest articles are always at the top.
• Allow visitors to leave comments to the articles (or posts) you’ve written.
• Gives you the possibility to have multiple users that can create and update the information on the website. (this is called user management ).
• Gives your site a unique design by using Themes (more on this later on).
• Adds extra-functionality that doesn’t come standard with the default installation through Plugins (something simple like a contact form or even a forum for your users – we’ll talk about this later on).

The WordPress Admin Pannel

Isn’t WordPress just a blogging software?

The short answer is NO.

While WordPress started as a blogging software it’s now used by companies and institutions all across the globe manage and update their websites. The New York Times, CNN, Ford and People Magazine , just to name a few, are using WordPress to power certain parts of their online business.

WordPress can be used as a publishing platform for news sites, membership site, online shop and even as a social network similar to Facebook.

To put things in perspective, from all the websites in the world, around 14% are using WordPress to manage and update their content. That’s a lot of websites.

What is WordPress.com?

There are two flavors of WordPress. On the one hand there is the open-source free software that you can download and install on your website from http://wordpress.org. On the other hand there is http://wordpress.com, a self hosted service that give users the possibility to create blogs for free without the need to have a hosting account.

WordPress.com helps milions of people publish their thoughts on the web.

The company behind WordPress.com is called Automattic. The CEO of Automattic, Matt Mullenweg, is also one of the co-founders WordPress, the open-source software.

What is a WordPress Theme?

Fundamentally, a WordPress Theme is a way to “skin” your website. This means the design and presentation of the site is managed by the Theme.

There are multiple places to get hold of a WordPress theme. The WordPress Theme Directory is the official site for WordPress Themes which have been checked and inspected, and are free for downloading. There are also a lot of commercial themes, however if you are going to buy one I suggest you chose one of the companies on this page since they are released under the GPL license, the same as the WordPress software.

Using Themes

By default, WordPress comes with a default Theme, the latest being the WordPress TwentyEleven theme. This means that when you install WordPress on your site, it’s ready to host and manage your content right away.

The Twenty Eleven Theme is the default WordPress theme.

Themes are easy to install and use, and for a more detailed description you can always consult the WordPress Codex on how to get started.

What is a WordPress plugin and why do you need them?

Plugins can extend WordPress to do almost anything you can imagine.

By default, WordPress comes with a standard functionality. Some might say it’s pretty powerful by it’s own, however WordPress can’t do everything.

This is where WordPress plugins come into play. Plugins are tools to extend the functionality of WordPress. Things like e-commerce carts, SEO functionality for your site, contact forms to gather leads and feedback, twitter widgets to display your latest tweets, caching plugins to speed up your site and many, many more are available some for free and some for money.

WordPress backend for installing and managing plugins.

Similar to WordPress Themes, there is a repository of WordPress plugins where you can find many free to download and use plugins. At the time of writing this article there were 16,000+ plugins in the repository.

Final Words

WordPress has come a long way in it’s short life. It helps millions of people publish their sites on the web, produced a vibrant community, creates jobs (WordPress consultants) and makes the entire world wide web a bit nicer and easier to access by anybody.

So the next time you need a website, just pick WordPress as your CMS!

Related posts:

1. QandaPress, a Q&A platform based on WordPress
2. WordPress as a social platform
3. Installing WordPress Child Themes and Customizing the Byty Theme

For those who just met up with WordPress, Profile Builder is WordPress registration done right; it lets you customize your website by adding a front-end menu for all your users, giving them a more flexible way to modify their user-information or to register new users.

We’ve also put together a short presentation video where you can see Profile Builder in action.

Now back to features. Firstly, we have completed the front-end registration plugin with a password recovery page. Just like every other page, this feature includes a shortcode ([wppb-recover-password]). Use this, with fully customizable emails and messages to skip the default WordPress forms all-together.

Also, by using the new (and now complete) custom redirects, your users will only have access to where you want them.

The second biggest feature of this release is the fact that you can mark the fields (both default and extra) as required. This means the user can’t register without having completed these fields, and neither can he delete this info later on from the edit profile page (the information can be modified but he/she won’t be able to submit the new data if it’s not filled out properly).

NOTE: at the moment this feature only works on the front end, but using this in conjunction with the custom redirects, your users won’t have access to the dashboard anyway.

Last but not least, I would like to mention the most important feature of this release: filters, the crème de la crème for all plugins.

We redesigned the plugin and added to every notification/content/values a filter to let you easily customize the layout for your own needs, without the fear of loosing the data after a new update.

You can find a detailed list of all the filters here.

We hope you enjoy the new features, and if you have any questions, just post a new topic over at the forums.

Also, there have been many interesting feature requests, which will be included in the next release(s), so stay tuned!

Related posts:

1. WordPress Profile Builder: a front-end user registration, login and edit-profile plugin
2. Profile Builder Beta
3. Profile Builder version 1.1.13 is officially out