The WordPress Text Editor Keeps Changing My HTML!

Don’t you hate it when HTML suddenly changes or disappears from your WordPress post or page? Yeah it’s happened to me too and it drives me nuts. This is most likely caused by someone switching from the Wordpress Text editor to the Visual editor. You know, the 2 buttons at the top right of the WordPress editor. (more…)

Build options in the backend of WordPress

Creating options in the WordPress backend just got easier than ever! With pwp_field() you can create options for your theme or plugin quickly without worrying about retrieving the field’s value once something is saved or registering the right hooks for things to work properly. Premise WP will take care of all this for us. Lets take a look at how you can use this powerful function. (more…)

Building grids and responsive layouts using Premise WP

With the CSS class pwp-row you can build a grid by simply assigning it to the parent element of your columns. You can then use the classes col2 - col6 to build a “column” grid or span1 - span12 to build a “fluid” grid. On column grids, columns within a row are meant to have the same width, while on fluid grids they can have different widths within the same row. (more…)

Make elements the same height

Make elements have the same height based on the tallest element of the group. By passing a string with the element selector you can select which elements are affected. If no parameter is passed the function looks for elements with the class premise-same-height.

How do I use it?

Lets say I have a grid with 4 columns and all columns have the same class – col_class – but different heights. The following code will set the min-height of all my columns to tallest column’s height.

$(document).ready(function(){
	premiseSameHeight( '.col_class' );
});

 

See a demo.

Tip: Always make sure to call your functions after the DOM is ready. Enjoy!

Grids with dynamically generated number of columns

This is a jQuery plugin that makes part of the Premise WP JS Library – a library of functions and plugins that extend Premise WP’s functionality. This plugin takes an element with many children and creates a column grid of all the children. It optimizes the number of rows used while trying to set equal number of columns per row. (more…)

Keep an element’s aspect ratio using only CSS

This class allows us to insert a block that grows or shrinks proportionately in relation with the width of its parent container. It stays proportionately sized based on a specific aspect ratio, 1:14:316:9 – so far these are the only aspect ratios available by default but it is very easy to add your own. (more…)

premise_field()

deprecated since v2.0.0 – Please use pwp_field() instead.

This function creates an HTML field and echoes it or returns it as a string.

It takes 3 parameters – type | arguments | echo. All parameters are optional; by default this function echoes a basic text field.

Here is a quick example for a text field with the name attribute ‘my_option’.

premise_field( 'text', array( 'name' => 'my_option' ) );

(more…)

Setting equal heights for elements

Set elements to have the same height using the tallest element as the minimum height. This is very useful! There’s tons of scenarios where you want to apply the same height to certain elements. With this class you can do exactly that. Premise WP automatically checks to see if any elements in the DOM have this class assigned to them, if it finds any, then it calls the function premiseSameHeight() on those elements.

Here is a quick demo

Let’s take the following grid:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

 

See how all our columns have different heights? Lets fix that by simply assigning each of those columns the class premise-same-height. Here is the difference..

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

 

If you are thinking “why not assign the class to the parent element to make it easier?”, don’t worry, we thought about that too. We went this route because it gives you more flexibility, but learn more about the premiseSameHeight function to see other ways you can use it in your project.

We hope you find this helpful!