Ambrosia “speaks” French, Serbian and Romanian

I just wanted to dedicate this post to the generous translators of the Ambrosia theme. The theme made it to version 1.1.5 and although I maintain it (making sure it works with every new WordPress version), some people are providing valuable support by contributing their translations. So far the theme is available in English, French (Nicolas Rouichi), Serbian (Andrijana Nikolic) and Romanian (Alexander Ovsov). So if you want your name to appear at the theme’s official page and repository, you know what you have to do 😉

Thanks for the support!

I’d like to say thanks to the below sites for promoting/mentioning my theme. Thank you all!

Updated :
…and of course all the people who choose Ambrosia for their theme! 😉

How to load styles and scripts on a WordPress theme

WordPress provides two useful functions to help you keep the head section on your header.php template file clean. The wp_enqueue_style will help you load your styles and the wp_enqueue_script will help you load your scripts. Both take the same parameters (name, source, dependencies, version, media – only for wp_enqueue_style – and in_footer – only for wp_enqueue_script) and the official WordPress documentation explains everything in great detail. Below I’ll demonstrate a simple way to use them, this is the same way it works on my latest free WordPress theme, Ambrosia.

These two functions “live” into the functions.php file. So let’s load the styles first. We only have to create an include function (for example ambrosia_load_styles()) that will load all the files using one or multiple wp_enqueue_style functions. To be more  specific, we’ll only load styles in our wordpress theme and not at the admin area (!is_admin()). Then an action hook will run the include function (ambrosia_load_styles()), just before the header.php template file is loaded. It’s simpler than it sounds, have a look at the below code.

It’s much more simple to load script files. We only include our scripts using the wp_enqueue_script function (again excluding the admin area).

Don’t forget that you can create dependencies on both CSS and javascript files, and of course load your javascript files in your footer area (after the page content is fully loaded).

Unfortunately, wp_enqueue_style and wp_enqueue_script functions don’t support any conditional comment mechanism, so if you have Internet Explorer (IE) only styles and scripts, you have to include them manually to your header.php file.

That’s all you need to know, so next time you’re building a theme, keep your header.php file clean by doing all the dirty work into the functions.php file!

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari’s default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.

How to remove junk from your WordPress “head” section

The default WordPress installation has some messy code in it’s “head” section. There’s too much useless meta data and noise that can cause issues, and even lead to security vulnerabilities, like the “generator” tag that informs the world the Wordrpress version you are running. You can clean up the mess by removing the bellow actions (copy and paste the below code to your theme’s functions.php file).

For some reason WordPress’s theme reviewers didn’t allow me to include the above code on Ambrosia theme, so feel free to include it.

Ambrosia: my new, fresh and free WordPress theme

In case you missed it, this blog “wears” a new theme called Ambrosia. Ambrosia is my second theme contribution on WordPress.org and is free for everyone, under the GPL 2 licenseAmbrosia is easy to install and customize, supports the new wordpress custom menus and comes with 4 different widget areas! For more information on the theme, it’s features and customization options, please have a look at the theme’s official page.

I will also start a series of “how was Ambrosia built” with more in-depth information and interesting wordpress code.

Until the next post, take care, download the theme (it’s free after all), and spread the word.