Boxify. A WordPress Plugin.

Boxify is a new Plugin that lets you organize your Post/Page’s content in seperate, dedicated boxes for each specific section. You can either choose to seperate all the content in boxes, or only a chosen section (the ‘Coming Soon’ box to the right, for example). You can also import and export boxes for usage in other posts & pages (explanation below).

Coming Soon!

> Widgedi! Integration.
> More Themes!

The size of each box is in your complete control, and you are not limited to a set amount of boxes per row (you can have a row with 20 boxes, and another with only 2 and another with 3 boxes that their size is spread in an imaginary grid of 15 boxes).

New in Ver 2.4

> Boxify turns responsive.

The Boxes are generated using straight-forward shortcode, with logical parameters. You can control almost anything in those boxes with those Parameters – from Color and Opacity, to background Images, added Icons and Border Radius (All explained Below).

There is also a quick way to create boxes using themes – boxify comes with a collection of themes that you can quickly use (see below in the tutorial).

Since Version 1.0, the process of designing and adding your posts got easier. Now you can play around with the styling parameters from a dedicated design helper area, and just copy and paste the generated code to your post, or use a conveniently located tinyMCE button to simply click on and add the box you want.

Why Use Boxify ?

Organize your Post/Page

With Boxify you can easily organize your Posts & Pages content by dividing it into logical boxes. You can either divide the content or just specific sections.

Modular Designs

Boxify does not limit you to a set amount of horizontal boxes. You can easily define as many boxes as you want, with pixel-precision spacings (inner & outer).

Simple, Logical Shortcode

All Boxify action is done using simple shortcode, with parameters that make sense and are easy to use.

Use Icons & Patterns

Boxify lets you use icons in boxes, and fancify your boxes with patterns or textures (or, basically any image).

How To: Create Boxes (click to expand)

In order to create a Box you need to tell Boxify 2 things :

How big is the Box : to tell Boxify how big is a box you first need to define your grid, which is, basically, how many boxes you want to be able to squeeze in one row (or, columns). After you define that, you tell Boxify how many of those columns you want your Box the use.
Where do you want to Place that Box : You caan either tell Boxify to place the Box to the Left of the Next Element (whether it a new Box, or the rest of the content), the its Right or without relation, which will make the Box dominate the entire row (but maintain its size).

Lets see how its done. Lets create 2 Boxes. Our grid will contain 3 Columns, the first Box will use 2 columns, the second one will use 1 columns. In terms of positioning, both Boxes will be to The left of the Next Element, which means, Box One will be to the left of Box Two which will be to the Left to the end of the line.

First, Lets see how it will look :

Box One

Box Two

Now, Lets look at the code :


[boxify cols="3" cols_use="2" position="left"]
Box One
[/boxify]
[boxify cols="3" cols_use="1" position="left"]
Box Two
[/boxify]

Kind of make sense, right ?

With the paramete cols you define how many colums you want the row to have, and with the parameter cols_use, you tell Boxify how many columns will the current Box use. Position, tells Boxify the relative position of the Box.

Now, a different example, with this one we’ll tell Boxify to create a box that will occupy 50% of the post region, without any relative positioning and see what happens. To tell Boxify to use only 50%, we’ll just need to define an even numbered columns grid, and let the box use half of those. The code :

[boxify cols="8" cols_use="4" position="none"]Box Three[/boxify]

And, the result :

Box Three

How To: Order Boxes (click to expand)

This section only applies if you want to display a series of boxes, without any content in between them (like the 4 boxes below “Why Use Boxify ?”). In order to properly tell the browser to separate the boxes from the content, you’ll have to tell boxify which box is the first one, and which one is the last.

For that, we have the attribute order.

but first, an image to explain what I’m talking about. In the image below, the two Lorem Ipsum paragraphs (top & bottom) are the ‘content’ of the post. The dark-gray boxes, are the series of Boxify Boxes that we want to seperate form the content. To do so, we add order=”first” in the first box in that series, and order=”last” to the last box.

Next Part, I’ll explain how to precisely position a Box in a row, and how to define spacings between other Boxes, The surrounding text and the Box’s internal content.

How To: Precise Positioning & Spacings (click to expand)

External Spacings

We can tell Boxify to give each box a pixel precision positioning in relation to the content or the other boxes. We do that by using the box_spacing attribute.There are several methods to use box_spacing (for those who are familiar with CSS, ‘box_spacing’ is the equivalent of ‘margin’ and accept all the shorthand methods, only pixels tho), Here I’ll show the 4 most common :

box_spacing=”5 10 15 20″ : This means, that the Box will be 5 pixels away from the content thats on top of it, 10 pixels from the content to the right, 15 pixels form the one to the bottom and 20 pixels from the content to the left. In this method, you can achieve pixel precision spacings from all directions. In short, its – [inline code]box_spacing=”top left bottom right”[/inline-code] (clockwise).
box_spacing=”10 20″ : This means, that the Box will be 10 pixels from the Top and Bottom content (Vertical distance), and 20 pixels from the Left and Right content (Horizontal Distance). In short – box_spacing=”vertical horizontal”.
box_spacing=”20″ : This means, that the Box will be 20 pixels far from the content in All Directions.
box_spacing=”10 auto” : The Box will be located 10 pixels away vertically, but will be Centered horizontally. Useful when you use position = ‘none’, and want to place the Box in the Center of the Row.

First example, lets position a Box (40% of post width) to the Left of its surrounding content, with different spacing from each direction :

orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Box Four

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The code (Pretty self explanitory):

[boxify position="left" cols="5" cols_use="2" box_spacing="10 30 40 100"]Box Four[/boxify]

Lets go back to Box Three, and place it centered using the ‘auto’ method, the code will be [boxify position="none" cols="6" cols_use="3" box_spacing="10 auto"]Box Three (Centered)[/boxify]

Box Three (Centered)

Internal Spacing

Internal Spacing simply means the Space between the Box’s Content and its border. This is achieved by using the atrribute padding (which is the equivalent of CSS’s ‘padding’). The Usage is exactly the same as box_spacing (apart from ‘auto’, padding doesn’t know what ‘auto’ means), so no need to repeat the description. I’ll just show an example of the Internal Spacing.

Box Five. some random text : Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

And, the code :

[boxify cols="5" cols_use="3" padding="10 30 50 70" box_spacing="10 auto"]Box Five. some random...[/boxify]

How To: Add an Icon (click to expand)

With Boxify you can add an Icon of your choice to the Box to attract the user’s eye, make your design make more sense or just make it look better. To add an Icon you need to follow this steps :

Just like you upload any other image to the post, upload your Icon with the ‘Add Media’ button.
After the Icon is finished uploading, you’ll see at the Add Media window a field thats called ‘Boxify Icon’ (Usually, just below ‘Link URL’. In that field, enter an identifier for that Icon. You’ll use this Identifier, to tell Boxify which Icon to grab when its generating a box.
Click ‘Save Changes’ (don’t insert the icon to the post).
Now, Create a Box with Boxify, and add an attribute icon, and give it the identifier you set for the Icon.
That’s it.

By default, Boxify will place that Icon at the top left corner of the Box, but you can change its location using the icon_position attribute. with icon_position you tell Boxify the {x,y} location of the icon, x is the distance in pixels for the left edge, and y is the distance from the top of the box. The usage will be – icon_position=”10 20″ for a {10px, 20px} positioning.

Lets see and example :

Box Five

And, the code :

[boxify cols="2" cols_use="1" box_spacing="10 auto" padding="10 10 30 70" border_color="white" border_width="1" icon="icon-example" icon_position="10 5"]Box Five[/boxify]

How To: Box Design (click to expand)

I’ll not use too many words to explain how to design each box, as the parameter names are pretty self explanitory (and for those who are familiar with CSS, they are almost the same). Instead, I’ll show an image that”ll hopefully explain most of the attributes and add a few Examples.

Boxify, Box Design

In short, border_width, defines the width of the border of the box (use a number in pixels). border_color define its color and border_style the lines style (you can try ‘dashed’ and ‘dotted’ to see the difference). radius defines the radius of the box corners (in pixels). background_color, sets the box’s background color and background_opacity, its opacity (in precentge, from 0 to 100).

An example that uses all the attributes :

Box Six

And, the code :

[boxify cols="2" cols_use="1" box_spacing="10 auto" padding="20" radius="10" border_color="red" border_width="1" border_style="dashed" background_color="gray" background_opacity="80"]Box Six[/boxify]

How To: Share Boxes Between Posts/Pages (click to expand)

With Boxify you can import boxes from other posts or pages. In order to do so, you need to tell Boxify to, firstly, export the original box (boxify will make this box available for other posts/pages to grab) and give it a, preferably unique, name. To do so, you add the code export_name to the Box’s shortcode.

For Example, lets create a fancy little box, and export it from this page :

The Content

And, the code :


[boxify cols="2" cols_use="1" export_name="export" position="none" box_spacing="0 auto" padding="20" border_color="blue" border_width="2" background_color="gray"]
The Content

[/boxify]

Boxify gave this box the name “export” and made it available for other posts to grab. How do we grab this box ? we add a little shortcode. We head to the page we want to add the box too (either a new page, and existing one or even the same one – as well be shown in this example), and we tell Boxify we want to Import an external box.

We do this by adding the code import to the new Boxify shortcode, we have 2 modes of import -

import=”full” – This will import the entire box, including the styling.
import=”content” – This will only import the content of the original box, any additional content will be added after the original content.

We also need to tell Boxify from which Post to grab the Box and its Name. We use import_post to add the ID, and import_name for the name. This Page’s ID is 443, and the Box we want to import is called ‘export’. Lets see some examples :

Importing the entire box from above :

The Content

The code :

[boxify import="full" import_name="export" import_post="443"][/boxify]

No content needed in this case. Next Example we’ll just import the content, change the box’s styling and add addition content.

The Content + Additional Content

The code :

[boxify cols="3" cols_use="2" import="content" import_name="export" import_post="443" background="blue" border_color="red" border_width="2" padding="10" box_spacing="0 auto"] + Additional Content[/boxify]

I use this feature by creating a page (not shown on the site), and add all boxes to that page. and just import them whenever needed, keeps my posts/pages clean, and makes life much easier :)

How To: Box Themes (click to expand)

Boxify comes with a collection of existing Themes, which are ready made, easy-to-use box designs. Each Theme can be modified using the Boxify features that are described above.

You can use those themes as is, or you can use them just as base and modify them to your taste (by using the attributes from above).

Current Themes :

theme=”alert” :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Code for the above example :

[boxify theme="alert" cols="4" cols_use="3"]Lorem ipsum ... consequat.[/boxify]

theme=”info” :

Code for the above example :

[boxify theme="info" cols="4" cols_use="3"]Lorem ipsum ... consequat.[/boxify]

theme=”check” :

Code for the above example :

[boxify theme="check" cols="4" cols_use="3"]Lorem ipsum ... consequat.[/boxify]

theme=”strip” :

This theme will create a strip at the top of the box (as shown below), for a title. You’ll have to use h6 tag in order to let boxify know that this is the title. Boxify will convert the h6 to a strip, you can control the color of the strip by changing the background color of the h6.

Examples :

Box Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Box Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Code :

Left Box :

[boxify theme="strip" cols="2" cols_use="1" order="first" position="left" background_color="white" border_color="black" border_width="2" box_spacing="0 20 0 0"]<h6><span style="font-size: large;">Box Title 1</span></h6> ... [/boxify]

Right Box :

[boxify theme="strip" cols="2" cols_use="1" order="last" position="left" background_color="darkgray" border_color="darkblue" border_width="2"]<h6><span style="font-size: large; background: darkblue;">Box Title 1</span></h6> ... [/boxify]

Attribute Summary (click to expand)

Box Size and Positioning

cols. Accepts: A Number.

Number of columns in the row.

cols_use. Accepts: A Number.

Number of columns the box will use.

position. Accepts: ‘left’, ‘right’ or ‘none. default: ’none’.

The position of the Box in relation to the next element.

box_spacing. Accepts: A set of 1, 2, 3, or 4 numbers (or with ‘auto’ as described above). default: 0.

The spacing between the Box and the elements around it. in pixels.

padding. Accepts: A set of 1, 2, 3, or 4 numbers. default: 0.

The spacing between the Box’s content and its edges.

Box Design

background_color. Accepts: A color (accepted colors are described below). default: transparent.

The Color of the background of the Box.

background_opacity. Accepts: a Number between 0 and 100. default: 100.

Defines how opaque would be the Box’s background. In precentage (0 is completely transparent, 100 is completely opaque) (Thank you Larry :)).

border_width. Accepts: A Number. default: 0.

The width of the Box’s border. in pixels.

border_color. Accepts: A Color. default: black;

The Color of the border.

border_style. Accepts: ‘solid’, ‘dashed’ and ‘dotted’. default: solid.

Style of the border. Styles are self-explanitory.

height. Accepts: A number. default: auto.

Set a fixed height to the box. In pixels.

class. Accepts: text. default: none.

Set an extra class for the Box for easy access using CSS (for extra styling).

Icons

icon. Accepts: text. default: none.

The Icon that will be used in that boxed, based on the key that was entered when the Icon was uploaded. Explained above.

icon_position. Accepts: 2 number set. default: ‘0 0′.

The position of the Icon in relation to the Top Left corner.

Color Support (click to expand)

You can choose a color for any Boxify attribute in one of those ways :

Color name. ie, ‘black’ for black, ‘blue’ for blue, etc. Thats the easiest way. click here to see the supported colors.

Hex Triplet. ‘#ff0000′ for red, ‘#000000′ for black, etc. Learn more about Hex Triplets Here.

rgb / rgba. Either rgb or rgba is supported. ie, ‘rgba(255, 255, 0, 0.5)’ for a 50% opacity Yellow.

15 Responses to “Boxify. A WordPress Plugin.”

Larry April 7, 2012

In your How To: Box Design and in your Attributes the definition of opaque is incorrect.

You state…
0 is completely opaque, 100 is not at all

It should say…
0 is completely transparent, 100 is totally opaque
nmrdxt April 7, 2012

haha, good one. Thats proves my lack of knowledge in english … I thought opaque == transparent :) thanks!
Lothar April 12, 2012

Hi nmrdxt,

great Plugin! But I can’t add any icon in the box?!
Any idea?
nmrdxt April 13, 2012

Hey Lothar, Thanks! did you assign the same key to the ‘Boxify Icon’ field and in the short code, under ‘icon’ ?
JCB April 14, 2012

What a great tool!
I have a relatively simple question -
If our mainpage displays the content from, let’s say, “NEWS” category and we have one post in there which has BOFIXY boxes – Could we ‘display’ other posts within the boxify boxes?

(ie; one large boxify and 3 underneath, each containing content from other posts)

Thanks!
nmrdxt April 21, 2012

Hey Thanks!
Cross-post Boxes are a great idea! I’ll try to add this feature in the next update.
Creative Media + April 22, 2012

The background_color code does not work on my theme, the boxify boxes seem to default to a transparent background, although the background_color code is in the command. The boxes look really good, and they stand out with a colored background, do you have any advice on how I can make this command work? Thanks so much.
Creative Media + April 22, 2012

Hi, I went back in and combined the code for BLOCKQUOTE with the boxify code to create the illusion of a colored background, but yet and still if you could give advice on how to troubleshoot the problem w/ my own colored background, in which the code is not operating that would be really great. Thank you much, and great plugin by the way! All the best!
nmrdxt May 1, 2012

JCB, I added a cross post feature in this version – hope its what you were looking for!

Creative Media +, I guess the problem was with weird z-indexing, I think I fixed it – although its hard for me know, since I don’t know your set-up
Toni May 9, 2012

Thanks for the great instructions, I was able to make my boxes and populate them with text no problem. I however, cannot manage to get an image that I want in one of the boxes. On the Ministry page I want to put the COBY logo after the text and centered in the box. I gave the image a boxify name of coby (when that didn’t work, then I changed it to icon-coby) and used your example code but it does not show up anywhere in the box. I have no clue what I am doing wrong and would really appreciate your help. Thanks so much!
nmrdxt May 20, 2012

Toni, To add an image inside the box, you don’t have to use the icon feature – you can simply add the picture using the Post Editor in your admin area. And, No Problem!
Toni August 16, 2012

I have a problem and I am not sure how to solve it. I am using Boxify and I just updated the plugin. Well, now Boxify is not showing in my list of plugins and my pages on which I have used it, are messed up. I thought that I would just download the plugin again but it says it’s already installed. I tried reinstalling WordPress to see if that would straighten out the problem but it did not. I don’t know what to do, I hope you can help. Thank you.
nmrdxt August 17, 2012

Hello Toni,

I’ve sent you an email, it was a repository quirk that messed the folder structure. Its fixed now (had to retag as a new version, 1.2).

I’ve sent you instructions on how to quickly fix it in your end.

Thanks for reporting about this bug. New version is a-ok! :)
Toni August 17, 2012

Could you please resend the email, I didn’t get it.
Do You Need a WordPress Plugin that Reduces Your Bounce Rate? September 29, 2012

[...] More @ Boxify. A WordPress Plugin [...]