widgets Archives - Todd Halfpenny

July 3, 2017July 4, 2017

WordPress London – June 2017

After another favourable month in the meetup calendar, I was again available to get along to the WordPress London meetup, and boy was it a stonker.

Todd Halfpenny talking at WordPress London, wearing an Ionic Tshirt, looking animated. — Picture: Primary Image

The meet was held again at City University, who have been incredible venue sponsors of the meetup for ages, and who’ve agreed to keep up the sponsorship deal until the end of January 2018… bloomin’ good folk they are.

And speaking of sponsors, I should also mentioned that Gary and Dan announced that WP Engine have just agreed to a 12 months sponsorship renewal… so huge thanks to them also, and of course to SiteGround who sponsored the June event too.

Community Announcements

The meetup was taking on a new format this month, and the first change was the expanded section on announcements within the WordPress community. I’ll just bullet the key notes here;

WordPress London 2017 are after some support in formatting and posting up the transcripts from the talks. If you’re interested then you can find out more by tweeting me.
Videos from previous meets are on the WordPress London facebook page.
There’s a Profitable Developer Bootcamp for WordPress – Looks interesting if you’re interested in making money from WordPress
WordPress London have a new section for lightning talks, called wp_update_post… and they’d like talk ideas. If you’re interested, tweet ‘em up.

Also, here are some upcoming events…

PHP London July meetup – 6th July
WordCamp Edinburgh – 22nd – 23rd July
WordCamp Brighton – 18th – 20th August
WordCamp Manchester – Maybe the 28th October?
WooCommerce London July meetup
WP Hooked July meetup – London, 11th July

The Role of Page Builders for Developers – Doug Belchamber

This first talk came from Doug, who works for Smarter Digital, and focused on his history with Page Builders, and how his opinion has changed over time, right up to the 2nd-gen page builders of today.

He told us how they’ve evolved, from the times of using shortcodes, and widgets, and then ACF. From these building-blocks came, what Doug refers to as, 1st gen page builders. These 1st gen incarnations had a few weak spots. They weren’t great at showing how content was going to be rendered on the front-end, their performance was questionable, and then if you disabled them you were left with what Doug refers to as shortcode hell. These thoughts and anecdotes appeared to ring true with many attendees… there were a lot of burnt fingers.

He then talked about Beaver Builder, one of a current raft of plugins that he classes as 2nd gen page builders. This part was thoroughly enlightening… he talked through how he uses it in his workflow, as a developer, and how you can create modules for it, configure it dramatically via its powerful API, and handle user access.

Now, I can certainly see myself as one of these devs who instantly feels a bit nauseous when page builders are mentioned, but Doug has done them proud with this talk… go watch it now.

wp_update_post

This next slot was incredible… Dan and Gary made a real steal in getting hold of this chap to talk through the updates to WordPress that dropped in version 4.8.

OK, I’m kidding… it was me doing a brief lightning talk as part of the new format of the meetup. I don’t want to big myself up too much, but if you want to know about the new Widgets then checkout the slides, or video of the talk.

WP_Model – Anthony Budd

Next up was Anthony, talking through his pseudo ORM for WordPress, WP_Model, and open source project designed to provide a better method for handling posts using a simple OOP style syntax.

I made so many notes on this, as it was truly fascinating. WP_Model can be thought of as cake, or Laravel, if you’re familiar with such things. Anthony started the project to abstract the way he had to deal with multiple tables in the WordPress database when building apps with WordPress as a Backend. He was having to use wp_post and wp_postmeta tables, but with WP_Model he was able to create an abstraction of the data. He had several goals for his project, they included;

Simple syntax
Easily added to existing project
Calls to go through wp core

Anthony also mentioned some generic benefits of re-using WordPress as the backend for your project. Things like its popularity and community, and from those the vast repository of plugins.

There were loads of great examples in Anthony’s talk, so I strongly suggest you check out the following links;

Wrap up

Well what can I say… GO CHECK OUT THE VIDS OR BE SQUARE.

Seriously, do it now… Doug and Anthony are aces!

And so are Dan, Gary and Annabelle, for organising another great meet. Thanks too to City University, WP Engine and SiteGround, for sponsoring.

Next meet is booked in for the 27th July, RSVPs open right now, too.

April 21, 2016April 21, 2016

The Easy Way to Add Widgets to WordPress Content

In my experience of building and maintaining WordPress web sites it is quite a common to want to put some related blocks of information into your main post’s or page’s content, inline. For example you might want to add a tag cloud or a list of related posts. This type of information is already available via WordPress widgets and of so you could add it to your sidebar (if you theme and template supported one). But what if you want to add the tag cloud into the middle of the post… like this;

Wow, pretty cool eh?

So this is possible today using my 5* rated Widgets on Pages plugin. With the plugin installed you can create a new Widgets on Pages sidebar, add your Tag Cloud widget to it, copy the generated shortcode and then paste that into your content. But now it’s even easier…

Introducing Turbo Widgets

I’ve recently created a new plugin for WordPress, called Turbo Widgets. And with this, WordPress widgets can be added to posts and pages using the nice WYSIWYG editor… click, click, click, BOOM!

There’s a free version of the plugin available on the WordPress.org plugin repository that has this nice GUI for adding widgets and there’s also a premium version that supports the ability edit the widgets too, again using the TinyMCE WYSIWYG editor.

And Turbo Sidebars?

As well as this, the premium version also supports Turbo Sidebars. These are custom content areas that can hold standard WordPress content (text, images, etc) as well as widgets added through the Turbo Widgets features. These content areas can then also be added to posts and pages via shortcodes (soon through the WYSIWYG too) . You can also use template tags to add these Turbo Widgets to your themes templates, say for example adding related posts to the bottom of each blog page.

The documentation page for Turbo Widgets contains further info on how to use these, but I also hope to blog through their usage too in the near future.

March 9, 2013

From a Problem to 100,000 Downloads

It was 1054 days ago that I first wanted to place a WordPress widget into a post I was writing. Whether it was for a client site or personal one I can’t remember… the important thing is that out of the solution I came up with emerged the Widgets On Pages WordPress plugin.

The plugin has undergone very little change since it’s 0.0.1 check-in to the WordPress.org plugin repository but since then it’s had very favourable reviews and been included in several blog posts and conference talks. But more importantly, for today at least, it’s now been downloaded over 100,000 times!

It has a current rating of 4.7/5 and at the time of writing sits as the 105th most highest rated plugin on the WordPress.org repository. 105th might not seem too good but it should be noted there are over 23,800 plugins in the repo.

August 12, 2012

August wp-hooked Widgets Admin Write-Up

At the August Meet-up of the London based wp-hooked I talked on the topic of WordPress Widgets, and in particular the admin area for them (slides can be found here). The talk came from the view of a user (read not developer) of WordPress who wants to take advantage of all the wonderful chunks of code that already exist in the WordPress widgets ecosystem. This ecosystem is a constantly growing one with Widgets being developed and released on the WordPress.org repository all the time. For website users (e.g. site owners, authors, etc) to actually make use of these great blocks of logic it’s not a friendly place sadly. The legacy idea of Sidebars is one that still has a place but it’s the use of Widgets outside of these well-trodden widget areas that things start to get tricky.

Let’s CMS it ALL

Users are wanting the freedom to add widgets into posts and pages as inline content; they want to easily add widgets to footer areas for things such as recent post lists, location maps and recent tweets. All these things are available as widgets but for users are heavily theme-reliant when it comes to how many widget areas are available to them and where those areas are on their site. In my talk (it could hardly be called a presentation) I suggested several plugins that can help users on their way to achieving these things;

amr shortcode any widget plugin by anmari
My very own Widgets on Pages plugin
get_dirty_and_write_some_code();

During the talk several other plugins were discussed;

Dynamic Widgets – Control which widgets to display in the sidebars for pages
Widget Logic – Control which widgets to display in the sidebars for pages
Multi Edit – Not really widgety but adds extra content blocks to posts and pages admin screens
Page Layout – Page Layout allows to define a page layout using widgets
Carrington Build – A premium build tool which gives an advanced admin “layout” UI which enables users to add “content modules” to pages which could be widgets.

Screenshot of the Carrington Build in action

What Next?

Although all these plugins seem to add some great support to users when it comes to having control of their sites’ layouts and in particular the use of widgets they all seem to be a bit lacking. As a group we discussed what the solution would look like if we were designing from the ground up… especially now that we knew there was a demand to have this extra level of control and advanced use cases… something that the WordPress guys wouldn’t have known about when initially thinking about widgets. We came up with the following points which would hopefully spur on some further thought and potentially create a great solution;

Users want to add widgets to posts and pages on the fly.
Do widgets need to belong to sidebars? My personal thinking here is that CPT could be used to replace sidebars altogether.
Perhaps Widget attributes could be stored in post meta data if that Widget instance belonged to a particular post.
Having a drag and drop, minimal interface via the editor would be good… we would want to avoid the use of shortcodes. Perhaps in a similar way to the method used for images?
Users want to easily add widget areas to existing themes
Users want to be able to control the layout of widgets within their posts and pages.

And so there we have it… we have essentially a loose spec for a killer plugin or modification to core.

And what of wp-hooked?

For my part I really enjoyed the opportunity to vent some frustrations I’d been having personally as well as seeing over and over again in the WordPress.org support forums. It was great to have some expert feedback from like-minded WordPress folk. Once again, of course, thanks go to Emily and Ross for organising and chairing and of course the Dachis Group for hosting us. I’m already looking forward to the Sept ’12 event… what can I say, beer, WordPress and friendly geeks are excellent bed-fellows.

May 8, 2011

WordPress 1 Minute Wonder – Styling Widgets on Pages Horizontally

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

July 25, 2010

Advanced WordPress Page Layout Experiment

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}

.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}

.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}

.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}

.widgets_on_page ul {
list-style: none;
}

.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}

.widgets_on_page h2.post-title a  {
font-size:0.9em;
}

.featured_news h2.post-title a   {
font-size: 1.5em;
}

.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}

.widgets_on_page  {
font-size:0.9em;
}

.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}

#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}

img.attachment-thumbnail {
float: left;
}

.also_in_the_news img.attachment-thumbnail {
display: none;
}

.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}

li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}

li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}

li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page

May 9, 2010

How to display Widgets inside posts and pages

I was faced the need to be able to place extra manageable content inside a wordpress page’s core content… and without an existing plugin available to do this I thought I’d write one of my own.

The output was the Widgets on Pages wordpress plugin which is at time of writing at version 0.0.4. The plugin basically allows the author to add a shortcode to their wordpress page or post which will then add the content of a predefined Widget area (or sidebar) at that point in the post/page

The plugin approach allows the user to add a lot of extra control to their wordpress sites without the need for any coding or markup skills (PHP, MySQL, HTML etc).

UPDATE: In version 0.0.4 you are able to define an unlimited number of separate sidebars and call these all separately within the wordpress content.

Tag: widgets