hard hat web developer spider cartoon

WordPress Developer Plugins

I could go on and on about WordPress SEO by Yoast, NextGen Gallery by Photocrati & Alex Rabe, or Better WP Security by Bit51… But I’d like to share some of my favorite under-appreciated plugins. Plugins which some in really handy if you’re developing or managing WordPress sites.

Recent Custom Posts by: Mike Mattner

Is a wonderful little plugin which gives you the functionality of the WordPress recent-posts plugin, but lets you tie in to your themes Custom Post Types (wooThemes ‘Products’ is an example of a custom post_type). If you get an obscure request such as: ‘Can we add the links of my homepage slider to the sidebar on the blog-page’ – Give this one a go, it’s useful. This plugin is also a great widget-template that you can re-use for other projects.

Post Type Switcher by:
John James Jacoby & Matthew Gerring

Is a very-handy plugin. Post Type Switcher allows you to switch the post_type of any blog-item. Say you have a page and you want to turn it in to a blog-post… You don’t have to copy & past it, and re-categorize it… Simply use this plugin to re-assign the blog-item to a different post_type. Not too shabby.

Simple Widget by: wpbeginner.com

This is a hugely useful little tutorial & shows you how to create your own widgets. Add the code from this tutorial to your theme’s functions.php file, or turn it in to a plugin


<?php
/*  Copyright YEAR  PLUGIN_AUTHOR_NAME  (email : PLUGIN AUTHOR EMAIL)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as 
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

// Creating the widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 

// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
    
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
  
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
  register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

wpbeginner.com has a number of great tutorials, including this one showing How to Add Custom Meta Fields to Taxonomies (such as WordPress categories or tags)

WordPress Admin Screenshot with Code

Twenty Fourteen CSS Tweaks

It was time for a new theme and I tossed Twenty Fourteen on… Then, I found this sweet little css input area (yes I’ve seen them before but I tend to avoid them because they overide rules elsewhere in the theme by outputting css inline with the html)… But then I figured hey… this thing looks terrible, but it works great, so I made lemonade… and what makes that lemonade even sweeter is that I can update my blog with the code I added.

Before I hit ‘ctrl-v’ and ‘unleash the fury’ I’d like to point out a couple of things that take place in this stylesheet.

First off, I’ve copy / pasted the rules I want to change from the parent css in their entirety and left a lot of commented out data… This is mostly because I’m lazy but also adds maintainability to my code – I can refer to rules nearby the rules I modified and have a slightly better understanding of what the environment I’m working in is.

I like to comment out things… Remember commenting out html and php are different. The php output won’t show on the page if you comment out the html it outputs, but it still uses resources when it executes. So comment out with these: I’ve been using this one lately for html & php documents <?/*?>this is commented out in both html and php<?*/?>…. But doesn’t have to be within a php-block.

Another thing you can notice about (at line 99 of) this stylesheet is that anything that happen in a media-query in the parent stylesheet had to happen in the same media-query to be over-wrote by a child-stylesheet.

Here’s those css tweaks for the Twenty Fourteen theme (possibly to be updated)


/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/

.site{margin:0 auto}

a {
  color: #0074a2;
/*  text-decoration: none;
*/
}
::selection {
  background: #0074a2;
/*  color: #fff;
  text-shadow: none;
*/
}
::-moz-selection {
  background: #0074a2;
/*  color: #fff;
  text-shadow: none;
*/
}
button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #0074a2;
/*  border: 0;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 30px 11px;
  text-transform: uppercase;
  vertical-align: bottom;
*/
}
.search-toggle {
  background-color: #0074a2;
/*  cursor: pointer;
  float: right;
  height: 48px;
  margin-right: 38px;
  text-align: center;
  width: 48px;
*/
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #0074a2;
}
.paging-navigation .page-numbers.current {
  border-top: 5px solid #0074a2;
}
.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
  background-color: #0074a2;
/*  border: 0;
  font-size: 12px;
  padding: 5px 15px 4px;
*/
}
.widget_calendar tbody a {
  background-color: #0074a2;
/*  color: #fff;
  display: block;
*/
}
.content-sidebar .widget a {
  color: #0074a2;
}
.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
  background-color: #0074a2;
/*  border: 0;
  color: #fff;
*/
}
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
  background-color: #0074a2;
}
.slider-direction-nav a:hover {
  background-color: #0074a2;
}
@media screen and (min-width: 783px) {
  .primary-navigation ul ul {
    background-color: #0074a2;
  /*  float: left;
    margin: 0;
    position: absolute;
    top: 48px;
    left: -999em;
    z-index: 99999;
  */
  }
  .primary-navigation li:hover > a,
  .primary-navigation li.focus > a {
    background-color: #0074a2;
  /*  color: #fff;
  */
  }
  .secondary-navigation ul ul {
    background-color: #0074a2;
  /*  position: absolute;
    top: 0;
    left: -999em;
    width: 182px;
    z-index: 99999;
  */
  }
  .secondary-navigation li:hover > a,
  .secondary-navigation li.focus > a {
    background-color: #0074a2;
  /*  color: #fff;
  */
  }
}

a:active,
a:hover {
/*  color: #41a62a;
*/  text-decoration:underline;
}
button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: #148dbc;
/*  color: #fff;
*/
}
.search-toggle:hover,
.search-toggle.active {
  background-color: #148dbc;
}
.search-box {
  background-color: #148dbc;
/*  padding: 12px;
*/
}

.ngg-gallery-thumbnail-box {
/*  float:left;
*/  margin-right:0!important;
}

totally-tabular-header

Totally Tabular WordPress Plugin

Responsive Tabbed Widgets – Aiming to Increase Usability through responsive tabbed-regions & drop-down-menus.

Install

Totally Tabular - Responsive Tabbed Widget WordPress plugin

Installation Guide:
  1. Activate Plugin
  2. Visit Appearance >> Widgets & Add widgets to 'Tabular Sidebar'
  3. Use [tabular] shortcode Tabular-Sidebar in your WordPress theme, posts or pages.
  4. Tabs will cycle automatically & switch between tabs when clicked.
  5. Visit Settings >> Totally Tabular to change the speed of the animation
  6. Only One [tabular]-shortcode supported per-page! (at this point)
Use [tabular]-shortcode to include widgets added to the Tabbed-Sidebar in your WordPress theme. Tabs will cycle automatically & are clickable.
Gallery
Twitter
D/L
Download Totally Tabular here!
(I'll get this thing hosted on wordpress.org sometime soon)
Visit the GitHub Repo Here

Totally Tabular – Responsive Tabbed Widget WordPress plugin

This WordPress plugin adds a sidebar which you can then add widgets to. Output the sidebar anywhere in your theme (or post/page contents) using the [tabular] shortcode. Any widgets added to the sidebar will be displayed as tabbed content. The css-styles are still rough and I plan to add more options to the admin-interface. This is a beta release. Please email me your feedback.


This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA


Installation Guide:
  1. Activate Plugin
  2. Visit Appearance >> Widgets & Add widgets to ‘Tabular Sidebar’
  3. Use [tabular]-shortcode Tabular-Sidebar in your WordPress theme, posts or pages.
  4. Tabs will cycle automatically & switch between tabs when clicked.
  5. Visit Settings >> Totally Tabular to change the speed of the animation
  6. Only One [tabular]-shortcode supported per-page! (at this point)

Use [tabular]-shortcode to include widgets added to the Tabbed-Sidebar in your WordPress theme.
Tabs will cycle automatically & are clickable.


Download Totally Tabular here!
(I’ll get this thing hosted on wordpress.org sometime soon)


Visit the GitHub Repo Here*This is a ‘Developer-release’ The options-page to adjust the speed & colour of the output hasn’t been built yet*


Developer Notes

As of right now the whole tabbed-area is css position:relative and the tabbed content-areas position:absolute. This is because the widgets are output in a title1,content1,title2,content2 sequence.

I had to position the content areas a fixed amount from the top of their container to make room for the tabs / links… Any other configuration results tab/content/tab/content… Rather than tab/tab/rotating-content.

Ideally I would like to see them output in title1,title2,title3 – content1,content2,content3 sequences so I could avoid using absolute-positioning which may not display where expected in some themes.

It’s one thing to filter the widget titles… But I’m finding filtering the content output with each widget to be difficult, as there is no one way to format widget-content, and thus no one-way to filter them all to behave in this custom-formatted sidebar. If you find bugs or can suggest improvements please get in touch with me.