The best free WordPress plugins for January 2015

Ah, January. The new year is a great time to evaluate your life, and your choices. This year, why don’t you ask yourself if you’re using the right plugins for your WordPress sites? Maybe there are some new plugins you could look at.

Maybe those plugins are right here…

Single Background

If you ever wanted the ability to specify a different background color or image for any single image or post, then Single Background is what you’ve been looking for. It’s all done with a simple shortcode, and that’s it. I can see it being useful for websites that feature a variety of products or services, each of which might have its own individualized branding.

Portfolio Post

We all build portfolios. Why then, should we not have a basic plugin that creates a “Portfolio” post type? There are others, but this one stands out for its simplicity. It’s a new post type, with a new category taxonomy. No frills, nothing fancy, just something you can build on. There’s no reason you couldn’t edit the plugin itself to make something perfectly suited to your own project. There’s also no reason you should build this functionality into the theme itself. Best to keep presentation and functionality separate, or has CSS taught us nothing at all?

Idea Factory

Idea Factory’s creators made it for the same reason that all brilliant plugins are made: the existing plugins didn’t solve their particular problem. Essentially, Idea Factory could transform your WordPress installation into the next “digg.com”.

It allows logged-in users to submit “ideas” (in the form of a custom post type) from the front end of your site. They can be set to await moderation, or be published automatically. Once published, all registered users on your site can vote on each idea. It’s designed to be mobile-friendly, but you can override the basic CSS (and a number of other things) to make the design all yours… or just fit in with whatever theme you’re using.

HTML Entifier

If you’re like me, you like to have HTML that is as valid as you can practically achieve. Install this plugin, and it will automatically convert symbols typed into your posts (such as smart quotes) into their HTML counterparts. That way, they’ll always be visible no matter what antiquated browser your users might be stuck with.

Note: Old posts will have to be re-saved.

Verbatim

Sometimes, users like to quote stuff you write. Once Verbatim is installed, any user that selects text on your website will be able to link directly to that text. Not to the page, to the text they selected. Once they’ve selected a phrase or sentence, two buttons will pop up. One allows them to save the link and post it where they like. The other sends the quote directly to Twitter.

The plugin has a bug, and doesn’t always override the theme’s CSS as it should in this case, but it can still be a useful tool.

Watchman

Watchman is a plugin designed to keep a closer eye on the revisions of your content. It doesn’t replace the revision system already used in WordPress, but extends it to include custom post types, post authors, dates, taxonomies, and comments too. Get your revisions for every conceivable thing here!

FlatFolio — Portfolio & Gallery

Yup, it’s another portfolio plugin, but this one has a few more features. When it comes right down to it, portfolio plugins are some of the most convenient tools to have in our arsenal. Some of us aren’t developers by trade, so it can be useful to have some pre-made ways to show off our skills. FlatFolio is one more such solution.

It’s freemium, but the free version isn’t bad at all. It comes with that flat style we’ve all come to know (and mostly love, for now), customizable CSS, and its own custom post type. On the front end, projects are displayed in a flat-style (as the name suggests) portfolio grid, with multiple available formats for images, video, and audio.

Jekyll Exporter

Going back to developer-friendly plugins, this one’s for people who are migrating away from WordPress. If you’ve ever wanted to take your content out if WP and import it into a Jekyll site, this is the way to do it.

Jekyll Exporter will convert all of your blog’s content, settings, and metadata to Markdown and YAML files. These files can then, theoretically, be dropped straight into a Jekyll installation. As I understand it, you’d still need to convert your theme yourself if you want to keep the same design, but this simplifies a lot of the content-moving process.

Easy Footnotes

For those of you who need this sort of thing, Easy Footnotes is a good way to automatically insert clarification into your posts with a shortcode, and nothing more. Just use the [note][/note] code wherever you like. The plugin will automatically insert a number wherever the code is left. Hover over that number, and the note itself will be shown in a jQuery powered tooltip. All footnotes will also be automatically displayed at the bottom of the post.

a3 Lazy Load

I had a little trouble testing this one, but if it works as advertised, it’s definitely worth a look. Essentially, it delays the loading of things like images and, well… mostly images, until they are actually needed. Not only does this improve site performance, but it could potentially save bandwidth on mobile devices.

Why did I have trouble testing this? Because there’s only one image on my testing site, and my Internet is fast. Check it out, see if it works for you.

Expire Sticky Posts

This plugin does exactly what it says. Have a sticky post for something like, say, a month-long promotion? Want that post to not be sticky anymore after the month is up? Just set the expiry date on your post editing screen; then forget about it. You’re golden.

Retina Icons: 1350+ Vector Icons For iOS 8 & iOS 7 – Agency License – $24

Source



si pide pass es: Ezequiel Bruni

The best free WordPress plugins for January 2015

Ah, January. The new year is a great time to evaluate your life, and your choices. This year, why don’t you ask yourself if you’re using the right plugins for your WordPress sites? Maybe there are some new plugins you could look at.

Maybe those plugins are right here…

Single Background

If you ever wanted the ability to specify a different background color or image for any single image or post, then Single Background is what you’ve been looking for. It’s all done with a simple shortcode, and that’s it. I can see it being useful for websites that feature a variety of products or services, each of which might have its own individualized branding.

Portfolio Post

We all build portfolios. Why then, should we not have a basic plugin that creates a “Portfolio” post type? There are others, but this one stands out for its simplicity. It’s a new post type, with a new category taxonomy. No frills, nothing fancy, just something you can build on. There’s no reason you couldn’t edit the plugin itself to make something perfectly suited to your own project. There’s also no reason you should build this functionality into the theme itself. Best to keep presentation and functionality separate, or has CSS taught us nothing at all?

Idea Factory

Idea Factory’s creators made it for the same reason that all brilliant plugins are made: the existing plugins didn’t solve their particular problem. Essentially, Idea Factory could transform your WordPress installation into the next “digg.com”.

It allows logged-in users to submit “ideas” (in the form of a custom post type) from the front end of your site. They can be set to await moderation, or be published automatically. Once published, all registered users on your site can vote on each idea. It’s designed to be mobile-friendly, but you can override the basic CSS (and a number of other things) to make the design all yours… or just fit in with whatever theme you’re using.

HTML Entifier

If you’re like me, you like to have HTML that is as valid as you can practically achieve. Install this plugin, and it will automatically convert symbols typed into your posts (such as smart quotes) into their HTML counterparts. That way, they’ll always be visible no matter what antiquated browser your users might be stuck with.

Note: Old posts will have to be re-saved.

Verbatim

Sometimes, users like to quote stuff you write. Once Verbatim is installed, any user that selects text on your website will be able to link directly to that text. Not to the page, to the text they selected. Once they’ve selected a phrase or sentence, two buttons will pop up. One allows them to save the link and post it where they like. The other sends the quote directly to Twitter.

The plugin has a bug, and doesn’t always override the theme’s CSS as it should in this case, but it can still be a useful tool.

Watchman

Watchman is a plugin designed to keep a closer eye on the revisions of your content. It doesn’t replace the revision system already used in WordPress, but extends it to include custom post types, post authors, dates, taxonomies, and comments too. Get your revisions for every conceivable thing here!

FlatFolio — Portfolio & Gallery

Yup, it’s another portfolio plugin, but this one has a few more features. When it comes right down to it, portfolio plugins are some of the most convenient tools to have in our arsenal. Some of us aren’t developers by trade, so it can be useful to have some pre-made ways to show off our skills. FlatFolio is one more such solution.

It’s freemium, but the free version isn’t bad at all. It comes with that flat style we’ve all come to know (and mostly love, for now), customizable CSS, and its own custom post type. On the front end, projects are displayed in a flat-style (as the name suggests) portfolio grid, with multiple available formats for images, video, and audio.

Jekyll Exporter

Going back to developer-friendly plugins, this one’s for people who are migrating away from WordPress. If you’ve ever wanted to take your content out if WP and import it into a Jekyll site, this is the way to do it.

Jekyll Exporter will convert all of your blog’s content, settings, and metadata to Markdown and YAML files. These files can then, theoretically, be dropped straight into a Jekyll installation. As I understand it, you’d still need to convert your theme yourself if you want to keep the same design, but this simplifies a lot of the content-moving process.

Easy Footnotes

For those of you who need this sort of thing, Easy Footnotes is a good way to automatically insert clarification into your posts with a shortcode, and nothing more. Just use the [note][/note] code wherever you like. The plugin will automatically insert a number wherever the code is left. Hover over that number, and the note itself will be shown in a jQuery powered tooltip. All footnotes will also be automatically displayed at the bottom of the post.

a3 Lazy Load

I had a little trouble testing this one, but if it works as advertised, it’s definitely worth a look. Essentially, it delays the loading of things like images and, well… mostly images, until they are actually needed. Not only does this improve site performance, but it could potentially save bandwidth on mobile devices.

Why did I have trouble testing this? Because there’s only one image on my testing site, and my Internet is fast. Check it out, see if it works for you.

Expire Sticky Posts

This plugin does exactly what it says. Have a sticky post for something like, say, a month-long promotion? Want that post to not be sticky anymore after the month is up? Just set the expiry date on your post editing screen; then forget about it. You’re golden.

Retina Icons: 1350+ Vector Icons For iOS 8 & iOS 7 – Agency License – $24

Source



si pide pass es: KUNLEXY

3 tricks for adding texture to your text with CSS and SVG

3 tricks for adding texture to your text with CSS and SVG

Getting started with Foundation for apps

So, there’s a new version of Foundation…

Not long ago, we told you all about how to get started with Foundation 5. Now there’s a new version out; not “Foundation 6” but Foundation for Apps, and it’s going to be huge.

That Foundation 5 is a powerful and flexible framework, there is no doubt. It can be used for content-driven websites, apps, almost anything you can think of, though it might take some work and customization. There are, however, layout and design conventions specific to apps. Also, apps are often developed for mobile browsers, which support newer technologies.

In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs, and Zurb has provided exactly that.

Installation & features

Foundation for Apps is not the old Foundation with some added features. It’s a completely different product. It’s designed from the ground up do be web developer-friendly. Indeed, while you don’t need to be a developer to use it, it helps to know a little bit about setting up development environments.

This is because you don’t just unzip this framework and drop it in your apps folder. It’s based on tools like Angular.js](https://angularjs.org/) and Sass; it comes with its own mini-server which will compile and serve your projects for you on the fly. This means that you have to have Node.js, Ruby, and a few other things installed. You also have to install the whole thing from the command line. Developers working on Linux and OSX won’t have any problems getting set up. It’s a bit more troublesome for aspiring nerds like me who use Windows.

Once you get past these initial hurdl… ahem I mean, embrace this new way of doing things, you’ll see some awesome stuff under the cover, including:

• A grid based on Flexbox and designed for apps. It includes support for laying out your “screens” vertically and horizontally, scrolling inside each section, and more;


• tons of UI components;


• Angular.js; it’s all the rage right now;


• a template and component-based file structure;


• Motion UI: Zurb’s new animation library designed specifically for app user interfaces.

Getting started

One of the advantages of frameworks in general is that they’re perfect for making quick prototypes. Once you’ve installed this thing, and have started the mini server, it’s time to put your ideas together into a live, interactive interface that doesn’t do anything. Yet.

For this article, I created a dead-simple “contact management page” that would have any client begging for more details, and maybe a change of layout:

In your app’s directory, you’ll find several folders and files. For the purposes of pure front-end development, you only need to worry about the “client” folder. That’s where all of your source files go. In there, the following folders and files are set up by default:

assets
- js
- - app.js
- scss
- - _settings.scss
- - app.css
- templates
- - home.html
index.html

The app.scss and app.js files are where you put all your custom Sass and JS, respectively. _settings.scss is just that: the file where you can override a lot of the default styles. The code is properly commented, and it’s easy enough to find what you need. You can also use this file to completely disable different parts of the CSS framework, so they won’t be included when your app is built.

index.html is the file that “make it all happen” by pulling in other components, app screens, and so on. home.html is the content that you’ll see when you first go to http://localhost:8080, once the mini-server is running. It’s also where I started working.

The grid

The first thing you’ll have to get used to is the grid itself. It uses Flexbox, so things work quite a bit differently, but the classes will be familiar. To create two blocks/columns of equal width, this is all you need to do:

<div class="grid-block">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>

Yup. That’s it. If you want to put actual content inside those two columns, you’ll need to do it differently. This is what the columns in my prototype look like:

<div class="grid-block">
    <div class="grid-block">
        <div id="side" class="small-12 medium-4 grid-content medium-order-2"></div>
        <div id="contacts" class="small-12 medium-8 grid-content medium-order-1">
    </div>
 </div>

You’ll notice that you always seem to need two elements with grid-block as classes to make things align properly. You might also notice that I’ve manually specified column widths. If you don’t, all blocks will expand to fill all available space, remaining equally wide.

Components

Also included are a large number of components from classic Foundation. You have your classic callouts and modal windows, alert boxes, form styles, button styles, tabs, and more. The typography is solid, and there’s also a limited icon set (all SVG) included for use in buttons, menus, and so on.

I’m particularly fond of the panels, which are basically blocks of content hidden off-canvas, which can be called onto the screen from any side.

I also like the “cards”. Cards are just simple rectangular objects meant to separate content. I used them for the list of contacts in the screenshot above. For the full list, see the documentation.

Go for it.

What are you waiting for? Get your command-line on and start playing with this. Even if you’re not an app developer, it’s good to know how to work in this environment, especially if you work with actual programmers.

RETRO MANIA: 50 Vintage Text Effects – only $10!

Source



si pide pass es: KUNLEXY

Getting started with Foundation for apps

So, there’s a new version of Foundation…

Not long ago, we told you all about how to get started with Foundation 5. Now there’s a new version out; not “Foundation 6” but Foundation for Apps, and it’s going to be huge.

That Foundation 5 is a powerful and flexible framework, there is no doubt. It can be used for content-driven websites, apps, almost anything you can think of, though it might take some work and customization. There are, however, layout and design conventions specific to apps. Also, apps are often developed for mobile browsers, which support newer technologies.

In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs, and Zurb has provided exactly that.

Installation & features

Foundation for Apps is not the old Foundation with some added features. It’s a completely different product. It’s designed from the ground up do be web developer-friendly. Indeed, while you don’t need to be a developer to use it, it helps to know a little bit about setting up development environments.

This is because you don’t just unzip this framework and drop it in your apps folder. It’s based on tools like Angular.js](https://angularjs.org/) and Sass; it comes with its own mini-server which will compile and serve your projects for you on the fly. This means that you have to have Node.js, Ruby, and a few other things installed. You also have to install the whole thing from the command line. Developers working on Linux and OSX won’t have any problems getting set up. It’s a bit more troublesome for aspiring nerds like me who use Windows.

Once you get past these initial hurdl… ahem I mean, embrace this new way of doing things, you’ll see some awesome stuff under the cover, including:

• A grid based on Flexbox and designed for apps. It includes support for laying out your “screens” vertically and horizontally, scrolling inside each section, and more;


• tons of UI components;


• Angular.js; it’s all the rage right now;


• a template and component-based file structure;


• Motion UI: Zurb’s new animation library designed specifically for app user interfaces.

Getting started

One of the advantages of frameworks in general is that they’re perfect for making quick prototypes. Once you’ve installed this thing, and have started the mini server, it’s time to put your ideas together into a live, interactive interface that doesn’t do anything. Yet.

For this article, I created a dead-simple “contact management page” that would have any client begging for more details, and maybe a change of layout:

In your app’s directory, you’ll find several folders and files. For the purposes of pure front-end development, you only need to worry about the “client” folder. That’s where all of your source files go. In there, the following folders and files are set up by default:

assets
- js
- - app.js
- scss
- - _settings.scss
- - app.css
- templates
- - home.html
index.html

The app.scss and app.js files are where you put all your custom Sass and JS, respectively. _settings.scss is just that: the file where you can override a lot of the default styles. The code is properly commented, and it’s easy enough to find what you need. You can also use this file to completely disable different parts of the CSS framework, so they won’t be included when your app is built.

index.html is the file that “make it all happen” by pulling in other components, app screens, and so on. home.html is the content that you’ll see when you first go to http://localhost:8080, once the mini-server is running. It’s also where I started working.

The grid

The first thing you’ll have to get used to is the grid itself. It uses Flexbox, so things work quite a bit differently, but the classes will be familiar. To create two blocks/columns of equal width, this is all you need to do:

<div class="grid-block">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>

Yup. That’s it. If you want to put actual content inside those two columns, you’ll need to do it differently. This is what the columns in my prototype look like:

<div class="grid-block">
    <div class="grid-block">
        <div id="side" class="small-12 medium-4 grid-content medium-order-2"></div>
        <div id="contacts" class="small-12 medium-8 grid-content medium-order-1">
    </div>
 </div>

You’ll notice that you always seem to need two elements with grid-block as classes to make things align properly. You might also notice that I’ve manually specified column widths. If you don’t, all blocks will expand to fill all available space, remaining equally wide.

Components

Also included are a large number of components from classic Foundation. You have your classic callouts and modal windows, alert boxes, form styles, button styles, tabs, and more. The typography is solid, and there’s also a limited icon set (all SVG) included for use in buttons, menus, and so on.

I’m particularly fond of the panels, which are basically blocks of content hidden off-canvas, which can be called onto the screen from any side.

I also like the “cards”. Cards are just simple rectangular objects meant to separate content. I used them for the list of contacts in the screenshot above. For the full list, see the documentation.

Go for it.

What are you waiting for? Get your command-line on and start playing with this. Even if you’re not an app developer, it’s good to know how to work in this environment, especially if you work with actual programmers.

RETRO MANIA: 50 Vintage Text Effects – only $10!

Source



si pide pass es: Ezequiel Bruni

Accelerate your front-end website development with Harp

I like static sites. To be more accurate, I like building them. There’s something pure about sitting there in front of your screen; it’s just you and your text editor, writing in plain old HTML and CSS.

Don’t get me wrong, dynamic sites are fun too. God knows I’m a fan of WordPress and the ease of use that it affords users. Static sites bring me back, though. I remember switching from WYSIWYG software to a text editor. I remember streamlining the development process with my first ever PHP function: include. Those were good days, but unlike so many others, they’re not all gone.

The difference is that now, we can do it better. Pre-processors like Less and Sass vastly improved the experience of writing CSS. We have any number of scripting languages to mix into our HTML, if we so choose. And then… then people did some really interesting things.

I’ve previously mentioned the Hammer app for Mac. It’s an app that introduces its own functions and expansions to good old HTML, allowing you to include a file as a partial in another, and other good things. It compiles the results into a regular static site that can be hosted anywhere. It’s actually got quite a few more features than that, but this article isn’t about Hammer. Why? It’s only available for the Mac platform.

Enter Harp…

Introducing Harp

It’s not an app, it’s a whole lot more. It includes preprocessors for CSS. It includes templating languages for HTML documents. It’s a mini server that can be used for development, or turned into an actual production server. You can use server-side JavaScript to turn it into a full app, as it runs on Node.js. Or, if you’re not a programmer, you can just build your static site, and then compile it for hosting elsewhere.

Because it’s based on Node.js, it’s cross-platform. It’s also MIT licensed, so it’s free. You can even make changes and redistribute or resell it if you like.

Now, people who have been keeping an eye out will have noticed that Harp is not the only tool of its kind. Lots of people are creating Node-based tools for getting web projects started quickly. My main problem with these is that they generally assume that you want to use their favorite CSS framework, animation library, or HTML boilerplate. Harp makes no assumptions about the code you want to write. It just gives you the tools to write it faster.

Mind you, it has to be installed and run via the command line. There’s no GUI for this. But once you get it going — and that isn’t hard at all — the benefits outweigh the learning curve.

The tools

CSS pre-processors

By now, I’m sure most of our readers are familiar with the ways that the web industry has tried to improve on vanilla CSS. When the mini-server for your project is running, LESS, SASS, and Stylus files are all automatically compiled into CSS.

The compilation is always satisfyingly fast. In all of my tests, changes made to my website have compiled in the time it takes me to save my file, then refresh my browser.

Templating languages

Also included are Jade and EJS. These are both JavaScript templating languages designed to help you write/generate more advanced HTML documents with more flexibility. Basically, you can build HTML templates, and store your actual page content separately from those templates. It’s kind of like using a CMS, only there’s no database (unless you want one), and you have to write all of the content into plain text files.

The real advantage is, of course, code maintenance, plus all the cool stuff that actual programmers can do with actual server and client-side JavaScript. These are also the languages that allow you to create more advanced systems, like blogs, all relatively easily (again, if you have a programmer on the payroll).

What’s the difference between the two? It’s mostly about how you prefer to write your code.

EJS keeps things simple. If you already know HTML, it’s just a matter of adding in EJS-specific tags, like so: <% include global/header %>. What I did there? Basically, I just grabbed the HTML for my page header from another file and imported it for use in my main template. You can do lots more complex stuff, of course. Here’s what the Harp documentation has to say about EJS.

Jade takes a very different approach to writing HTML altogether. It looks like this, as shown on the project’s home page:

body
    h1 Jade - node template engine
    #container.col
        if youAreUsingJade
            p You are amazing
        else
            p Get on it!
        p.
            Jade is pretty cool,

That all gets translated into HTML and Javascript. Note the inclusion of an if/else statement right in the middle of it all, and the dependence on proper indentation.

Coffeescript

Coffeescript is to JavaScript what Jade is to HTML. Basically, it’s a simplified format for writing JavaScript, which then gets compiled into the regular stuff. Like Jade, it’s heavily indentation-dependent, and drops a lot of the syntax.

It looks like this (another example shamelessly cribbed from the project’s home page):

math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

And the output looks like this:

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

The platform

The websites created with Harp can be hosted anywhere, of course. It’s worth mentioning, though, that Harp’s creators made a hosting platform specifically designed for stuff built with their software. The pricing ain’t bad, and it integrates with Dropbox for easy automatic updates to your site. Check it out here: www.harp.io

Conclusion

Harp, with its preprocessors, templating languages, sheer speed, and cross-platform goodness, is a solid addition to any designer’s toolbox. I say it’s worth the learning curve.

Mega Bundle of 105 Incredible Vector Infographic Templates – $27!

Source



si pide pass es: KUNLEXY