Custom Excerpt Placeholder for Events Manager

This PHP snippet creates a #_CUSTOMEXCERPT placeholder to be used with the Events Manager plugin. Just throw it in functions.php, and you can then use #_CUSTOMEXCERPT in place of #_EVENTEXCERPT in your event/list templates.

The snippet has two variables you may wish to edit:

  • $strip_HTML – whether or not to remove HTML tags from the custom excerpt. Be careful if setting this to false, as this can cut off in the middle of your tag attributes (e.g., <img src=”/wp-content/uploa” />)
  • $length – the length of your custom excerpt (characters)

Our New Mobile First Child Theme for Genesis 2.0+

[box type=”download”]

Mobile First Genesis 2.0 Child Theme

Download our new Mobile First Child Theme for Genesis 2.0. The theme looks and feels identical to the Genesis 2.0 Sample Theme, however it has been optimized with a “Mobile First” approach, meaning faster load times and an overall better experience for mobile users.

Download Now »
See Demo »[/box]

Intro

We’ve long been huge fans of the Genesis Framework – it integrates with tons of well-designed child themes, it offers lots of amazing functionality and plugins, and the StudioPress support team is consistently speedy and helpful. One thing we’ve always wanted, however, is a basic Genesis child theme that is “Mobile First.” So we decided to go ahead and make our own! We wanted to keep things as simple as possible, so we started with the Genesis 2.0 Sample Theme and went from there. Most of the work just involved rearranging CSS, however you may want to check out the full list of details below for more information.

Theme Details

    • Requires Genesis 2.0+.
    • All media queries have been switched from “max-width” to “min-width”.
    • Media queries have been rearranged to proceed from smallest to largest widths.
    • Only two changes were made to the original CSS to preserve styling after rearranging the media queries:
      • Line 700: .sidebar .enews-widget was changed to .sidebar .widget.enews-widget
      • Line 1366-67: the margin-top selector was changed to margin
    • This theme’s functions.php is identical to that in the Genesis 2.0 Sample Theme, only difference being the child theme name, url, and version definitions. It adds theme support for:
      • HTML5
      • Responsive viewport meta tag
      • Custom background
      • 3-column footer widgets

Important Note

Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below. Here are a few options:

Installation

  1. Install Genesis 2.0. If don’t already have Genesis, you might want to get it.
  2. Download the Mobile First Child Theme for Genesis 2.0.
  3. Install the the child theme, either manually or via WordPress’ theme installer.
  4. Activate the child theme.
  5. Feel free to modify the child theme’s CSS and PHP to create your own unique look and feel.
  6. All done!

Change Log

  • 1.4
    • Fixed nav extras CSS to better display search bar.
  • 1.3
    • Moved .first {} CSS rule into media queries where it belongs (thanks again @GaryJ)
  • 1.2
    • Added missing width: 100%; rule for full width content
    • Added missing float: right; rule for .content div
  • 1.1
    • Updated style.css table of contents to reflect new media queries (thanks @GaryJ)

Feedback?

We’d love to hear it. Please let us know if you have any comments or suggestions below. Thanks!

Add Expanding “Read More” Links to Your WordPress Blog

Here’s a handy jQuery/CSS snippet that adds special “read more” links to expand and hide your WordPress blog posts, accordion style. This is pretty useful if your blog page is spitting out a bunch of long posts, and you’d like to consolidate some space. The code is set to work with default WordPress classes and ID’s, however it can be easily modified to work on any HTML. Enjoy!

Check out this Pen!

 

Post Navigation for Use with Types & Views and URL Parameters

This code is an example of post navigation for use specifically with Types & Views. The post navigation works well in tandem with View’s parametric search forms, and can output next/previous post links based on URL parameters that indicate custom taxonomies and fields.… Read More »

Styling TinyMCE content in WordPress

I, for one, was tired of my left aligned images creating a staircase in TinyMCE when my theme CSS is set for them to nicely clear. Here is what it looks like in WordPress TinyMCE:

2013-06-28_10-12-37

When this is what it looks like on the page:

2013-06-28_10-16-01

In TinyMCE it can often be challenging to tell what the true layout of the page will look like when your front-end CSS is applied, but it turns out that it’s easy to change the TinyMCE styles as well. All you need to do is drop this code into your theme’s functions.php:

And then create a corresponding CSS file called custom-editor-styles.css in your theme folder.

Write the CSS to clear your <h2>’s, make any other style changes you want to show up in TinyMCE, and voilà! You’ve got a page that makes visual sense.

Clearing Headings

There is a lot more you can do with this, like incorporating more of your actual theme CSS, but the main point is just to make your TinyMCE (back-end) and theme (front-end) CSS more consistent. We don’t need it to look exactly like the site, just enough to understand how the final page is going to lay out.

If you’d like to learn more, you can always check out the add_editor_style() post in the WordPress Codex.

Tech Tip Tuesdays: Output a list of pages that includes/excludes pages based on their title

Hello and welcome to our first Tech Tip Tuesday, MIGHTYminnow’s very own tips & tricks series. Stay tuned for more…

WordPress’ native wp_list_pages() function is great for doing just what it sounds like – outputting a clean list of pages with one line of code – but sometimes we need to do more.

The following code goes in your theme’s functions.php file and can be used to output a list of pages, in which pages are included or excluded if their title contains a specified “test string.”