• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Petersen Media Group

Petersen Media Group

We help you spend less time ensuring your site is there, and more time making it profitable.

  • Home
  • About Us
  • FAQs
    • WordPress Hosting
    • Hosting Services
  • Benefits
  • Services
    • Choose your plan

Genesis Framework

January 13, 2017

Change Genesis .site-title H1 Wrap on the Homepage

I got an interesting request this week to change his Genesis framework child theme’s homepage .site-title H1 wrap to a p wrap. I was going to advise against this until the request continued to change one of the widget titles to an H1 and become his new site’s title.

My first thought was that I had to edit the entire header or site title with a filter but it was actually much more simple than that.

Looking at the Genesis core code, it starts off looking like something familiar: adding a filter for genesis_seo_title. Then I saw something else by jumping around a bit in that area of lib/structure/header.php:

// And finally, $wrap in h1 if HTML5 & semantic headings enabled.
$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;
$wrap = apply_filters( 'genesis_site_title_wrap', $wrap );

Aha! Could it really be as simple as changing that heading in the wrap? As we read on in the file, we see more evidence that is how things work:

// Determine which wrapping tags to use.
$wrap = genesis_is_root_page() && 'description' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

// Wrap homepage site description in p tags if static front page.
$wrap = is_front_page() && ! is_home() ? 'p' : $wrap;

// And finally, $wrap in h2 if HTML5 & semantic headings enabled.
$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h2' : $wrap;

So this is the code to change the site title’s wrap when on the front-page… by placing this in the front-page.php file found in most of the child themes:

//* Change site-title SEO wrap
add_filter('genesis_site_title_wrap','seo_wrap_site_title');

function seo_wrap_site_title($wrap) {
	return 'p';
}

This matches what the title wrap is on inner pages and I won’t dwell on or try to figure out why this child theme’s front-page title wasn’t already how the client wanted, but now you, too, have the code to change the wrap on the site title in Genesis with a very easy filter.

Genesis Framework

August 30, 2016

Add Genesis Custom Post Type Archive Settings

I had to avoid a long title because the actual topic is even longer:

How to add Genesis custom post type archive settings when you used a plugin to create the CPT(s).

In this case, the site is using Types and was used to create four CPTs, kill the default taxonomies, and create categories specific to each CPT. There is no way in the plugin to add support for genesis-cpt-archives-settings so there was no Archive Settings item in the CPT.

Between a support topic for the plugin and my own fixes, I was able to create a solution for my client site, so I share it with you.

add_action('init', 'cpt_archive_custom_init');
function cpt_archive_custom_init() {
//Construct an array of Post Types
$types = array('type1', 'type2', 'type3', 'type4',);
//Do a foreach (run the action over each single result of the above array)
foreach ( $types as $type ) {
add_post_type_support( $type, 'genesis-cpt-archives-settings' );
}
}

Genesis Framework

August 4, 2016

Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

Inline CSSFor quite a while, there has been a problem messing with the stylesheet in Genesis child themes that use the Customizer to add a new background image to the front-page section(s). At first, I noticed it with Minimum Pro while using the wonderful Carrie Dils’ (you need to know her if you don’t) Genesis Style Trump plugin. This plugin moves the stylesheet down the load stack so you don’t need to put a bunch of !important; all over your stylesheet due to plugins and their rampant use of !important.

The background just wouldn’t load for me if I had the plugin activated. I was furious, but at the time I was much more junior in my ability to find out why.

Fast forward to last week when I went to use my function to use a minified stylesheet with a theme that I’d used on a previous project. The key point with this function is that I wasn’t using a child theme that had front-page background images, so it had always worked.

Now it was a total bust. The stylesheet wasn’t even loading.

I tweaked the code and now it was loading the minified file, but the background images were all gone.

No images

No inline CSS blockUpon inspection of the generated code, the “inline-css” style block that the Customizer files inject into head were not there at all.

Ugh!

But I digress, you want code to solve your problem, don’t you? First, you need the action to remove the original stylesheet.

//* De-register uncompressed stylesheet - minified loaded above remove_action( 'genesis_meta', 'genesis_load_stylesheet' );

I place that action right below the wp_enqueue_scripts() function in functions.php for consistency. That’s right above the HTML5 markup structure in most Genesis child themes (if you’re new to the Genesis framework or considering switching, here’s why I use it).

Now you need to be within wp_enqueue_scripts() to enqueue the minified stylesheet with this:

$version = defined( 'CHILD_THEME_VERSION' ) && CHILD_THEME_VERSION ? CHILD_THEME_VERSION : PARENT_THEME_VERSION;
$handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
wp_enqueue_style( $handle, get_stylesheet_directory_uri() . '/style.min.css', false, $version);

If you do those two steps, you’ll have the same missing background images I had. ¡No bueno! There’s another step to take and you need to go to /lib/output.php for that. The first item should be an action to enqueue the scripts that Customizer needs to output to make the backgrounds appear. What you need to do is edit the priority for that action, whereas it is the default, unnamed priority when it ships. When given a priority of 12, everything works.

add_action( 'wp_enqueue_scripts', 'theme_css', 12 );

Generated code workingNow if you’re also a stickler for customizing the themes completely for clients, you’ll also need to do quite a bit of work to all of the Customizer files to find/replace function names and strings with your project name. If you miss even one spot, you’ll either get filenames that are odd or markup that you don’t want… not to mention it not working at all. My own best practices also includes moving the original theme info right below mine in style.css as a reference when customizing a theme rather than doing full-custom. Then I find/replace the original namespaces and such throughout.

Background images working

Those are the simple steps to get Customizer images to work if you want minified stylesheets in your Genesis child themes. I hope it makes your day better as you struggle with this and find this info.

Genesis Framework code,  Genesis Framework

September 3, 2015

Two Things You Need to Do to Your Genesis 2.2 Theme

If you’ve updated to Genesis 2.2, there are new accessibility (a11y) items that have been introduced into Genesis 2.2. You need two snippets to activate it for people with disabilities and then make the markup clean for sighted people.

The first snippet activates the a11y items. You put this in the child theme’s functions.php file, preferably in the same area as the other theme support items, because that’s just best practices.

Note: copy and paste the entire block, the overflow code will be included in the clipboard.

add_theme_support( 'genesis-accessibility', 
  array( 'headings', 'drop-down-menu', 'search-form', 'skip-links', 'rems' ) 
);

The second snippet removes them from normal browser visibility but leaves them in the markup for screen readers. This block goes in the child theme’s style.css, preferably in the areas before specific areas of the site. Defaults, Common Classes, or as a new area before Site Header are all good options. I put it after Plugins in my Sass starter theme that is a fork of BG Mobile First, BG Mobile First JP Sass, available for free on GitHub. In the case of Sass, I gave it its own partial.

/* ## Screen reader text
--------------------------------------------- */

.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
	color: #333;
	background: #fff;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus  {
	clip: auto !important;
	height: auto;
	width: auto;
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 15px 23px 14px;
	z-index: 100000; /* Above WP toolbar. */
	text-decoration: none;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

.more-link {
    position: relative;
}

/* # Skip Links
---------------------------------------------------------------------------------------------------- */
.genesis-skip-link li {
	height: 0;
	width: 0;
	list-style: none;
}

/* ## Accessible Menu
--------------------------------------------- */

.menu .menu-item:focus {
	position: static;
}

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
	left: auto;
	opacity: 1;
}

These are both things you should add to all of your existing sites and any themes you have on the market.

Genesis Framework a11y,  accessibility,  Genesis 2.2,  Genesis Framework

October 30, 2014

Genesis Framework Foundations: Treehouse Course by Jesse Petersen

I’m proud to announce that my first Team Treehouse course has launched today! I wrote yesterday about my Treehouse experience back in September when I was their guest instructor for a week in Orlando, and today the course has gone live: Genesis Framework Foundations.

In the course, I discuss and demonstrate Genesis child theme selection, Genesis-specific plugins, the framework settings, and run through a couple of child theme demo site setups using a simple FTP/SFTP connection and some simple CSS edits and pasting a PHP snippet from the StudioPress site.

Here is the trailer for the course you’ll see on the Treehouse site:

Everything from the producer, audio tech, and teleprompter were top-notch and it really helped make the best product I was capable of on my first go. Then the artists and motion graphics department took my scripted descriptions of my vision of what would help the students and they blew me away!

I am also happy to let you know that we are working on our next course that will lead into something… special. Something a LOT of people will want to dig into. I can’t say what either one is yet, but I’m thrilled to have the opportunity to teach people about what I love to do on a much bigger scale.

If you take the course and have any feedback, I’d love to hear it so I can improve and build upon this in the future.

Genesis Framework

October 29, 2014

My Treehouse Course Story

Back in May, I was watching my Twitter stream instead of working (admit it, you do that, too) and saw my friend, Zac Gordon, ask for Genesis experts to do a course. Me, being no dummy and being a big fan of being in the right place at the right time said:

@zgordon @treehouse Sure.

— Jesse Ⓦ Petersen (@jpetersen) May 27, 2014

Looking at that now, I can’t believe I saw that one week after he tweeted it. That’s a bit odd.

I met Zac in person at WordCamp Orlando 2013 and I was already familiar with Treehouse from the previous year’s WordCamp where I met another Treehouse instructor and got an account for a year. I was familiar with the quality and my mind started racing about how to teach Genesis.

Rewind nearly 15 years and you’d find me working at a local startup in Tampa doing screencasting tutorials of dozens of popular software suites from the likes of Microsoft and Adobe by decompiling their help files, creating scripts, screencasting, voiceovers, and quality control. Funny how life comes full circle on some things…

Jesse Petersen at Treehouse IslandAfter one Google Hangout, it became clear the task was mine to lose, so I took to writing an outline and we agreed on a schedule. In September, I was their guest in Orlando for a week where I blasted out all of the in-studio camera work in the first day and spent two more days in a recording booth doing screencasting. I hung around until the next morning just in case I needed to re-record anything and headed back home for lunch.

I had a BLAST!

Here’s the behind-the-scenes video they released a few weeks ago:

You can tell I had fun, right? As exhausting as it was being extroverted for a week, I came back recharged.

So, the course is coming out very, very, VERY soon, and I wanted to be sure to give you all access to a 50% discount for your first month of Treehouse if you click this link or banner. There are plenty more WordPress courses that Zac does regularly and I may be doing another outline right now… as well as watching a course on working in the console today. One more month until WordCamp Orlando 2014 and I saw Zac will be there again, so come meet and greet.

Genesis Framework

August 1, 2014

Disable Mobile Browser Telephone Links for Genesis Framework

I was blasting through a PSD to Genesis project yesterday and opened up Safari on my iPad mini at the end of the day, only to find the numerous phone numbers on my client site were all the hyperlink orange, which didn’t always go with the design, besides being a visual distraction. I really wanted to disable mobile browser telephone links to regain control of the design.

Solving it is very simple, though. Go to the Genesis settings page and scroll down to the header scripts box and enter:

Disable mobile phone linking in Genesis Framework

I refreshed the mobile browser and all was well.

(If you still don’t have the Genesis Framework, join the best WordPress theme community with your own copy.)

Genesis Framework

April 17, 2014

Adding Simple Social Icons & a Search Form to a Genesis Menu

It’s great how new client projects, especially those that a designer has a hand in, push a developer’s abilities. Every now and then, I mange to do something cool by piecing together functions and making something not only nice for a client but something to share with the community. In this case, it’s both Simple Social Icons and a search form inside Genesis menu items.

It should go without saying that this is for child themes running on the Genesis framework only, but I just said it. If you need help getting started editing Genesis themes, take a look at this starter tutorial.

Menu case study #1

My last project was a complete theme re-write of a bunch of stuff being done with hard-coded functions or page templates exiting out of PHP and writing entire sections of the page in HTML. That had to be fixed. One of those bits was putting a search form INTO the nav menu. We were using the header right widget area with the custom menu and it was a major pain to put the form where I wanted because of a lack of hooks exactly where needed and additional widgets in the area.

With a little more study of the situation, I went back to Gary Jones’ Genesis Header Nav plugin (which eliminates the widget area) and putting the other header content into the header hook with the proper ordering for the layout. For mobile, I switched to primary nav above the header.

Header area Primary nav

The generated code was exactly what I was aiming for: putting the search form into a menu slot as li.menu-item.custom-search for maximum control of the CSS.

DIY Natural generated code

I’m sure you’re just wanting the PHP for this now, so here is my Gist:

You’ll see that the only difference between the two (besides the function name) is the nav location name. I tried several things to combine the two into one function and I’m pretty sure it can be done, so I’ll gladly edit this and the Gist if someone feels like showing the way.

Menu case study #2

The very next menu project upped the ante. Funny how things work out this way… the site was using UberMenu just to have some social links/icons in a dropdown menu, which I walked the client through some better options than that, especially given mobile devices not having a hover effect. That meant that part of the consultation included a very visible solution for the social network links, as well as the search form.

Simple Social Icons & Search Form

Most of us love Simple Social Icons but that is a widget. I decided it wasn’t going to be good enough to put the widget in the menu without it being another li.menu-item like the search form. The first step is to create a new widget area for the menu, which can also be used in other areas by calling the area in a function and proper hook. Then it was time to alter the code I used for the search form to put the social icons in before the search form. This took both PHP and CSS to position everything correctly.

Simple Social Icons and Search Form

That’s all there is to it.

Questions? Something for the tip jar?

Genesis Framework Genesis Framework,  menu,  search form,  Simple Social Icons

July 25, 2013

Genesis 2.0 HTML5 Conversion Giveaway

The Genesis framework is going to be releasing their massive and much-anticipated update to version 2.0 any day now. When that happens, you can take advantage of very valuable SEO updates to the child themes, but only if the child themes have the new HTML5 markup enabled.

The StudioPress crew, in their vast wisdom, made it clear that you don’t have to enable HTML5 to update your Genesis parent theme to 2.0. Updating Genesis is not the same as updating your child theme to be 2.0 markup-compatible (What is markup? Read on.) Everything will still work if you upgrade, but without enabling HTML5 in your child theme, you won’t benefit from many things V2.0 includes.

This is still consistent with why a framework is important and why Genesis is the only theme family I work with.

All of a sudden, if you enable HTML5, the entire site design breaks because of the markup of the new code. Markup are the design bits that your design files look for in order to apply styles, layout, and other behavioral modifications or appearance. Without the proper “addresses” in your design, things break.

If you’ve made any alterations to your child theme over the months or years and don’t want to lose those by downloading a new HTML5 child theme, then you need to update your theme. StudioPress has said they’ve been sitting on for months waiting for everyone to get WordPress 3.6 and Genesis 2.0 in order to release a bunch of new and updated themes.

I’ve already updated the StudioPress child themes and several community themes, so you can have them now.

I’ve worked out a way to convert any child theme, no matter how much it’s been modified by another developer. This is not something you want to throw at your developer with a request if they’ve not yet done one. You’ll spend a lot of money if this is their first rodeo with V2.0.

giveaway steps

My conversion service is $248 for the first child theme and $150 for each one after that. By telling me why you love using Genesis, WordPress, or just generally participating in the comments with something nice, new, or celebrating life, you’ll be entered into a random draw the day after Genesis 2.0 releases to receive a FREE conversion.

Genesis Framework Genesis Framework,  HTML5

May 6, 2013

How to Modify a Genesis Framework Child Theme

The vast majority of the questions on the StudioPress forums for Genesis framework child themes are related to the general WordPress community who has been introduced to user-friendly premium themes not being web developers or programmers. The average website owner has no idea how to look for what to change or what options there are in changing something.

That is why people like me have a nearly-endless market of professionals of other industries needing my industry’s skills to make their vision happen.

A lifetime of learning

While it takes thousands of hours to learn a craft to the point of being both proficient and efficient, there are some simple things that the average person can handle once they are shown the tools to use and some instructions on how to use them. For those people, this should help them along the way with simple tasks.

A recap of the tools

In case you didn’t click the link in the previous paragraph, here is what you absolutely need:

Inspect Element context menuFirst, either Chrome or Firefox web browsers. In them is a feature when you right-click an element on the screen that says “Inspect Element” in the right-click context menu (yours will likely look different based on OS and browser plugins that alter the context menu).

This will bring up a frame inside the browser window that shows you both the generated HTML of the page and the CSS code all the way down the system of CSS files that each element uses to generate how it looks and behaves (upon hover, click, etc.).

Inspect Element window

Second, you need a text editor. Any editor (even TextEdit or Notepad) will do, but there are syntax highlighting editors that color different syntax in the language you’re typing in (usually just CSS, PHP, HTML, and JS). Those would be Sublime Text, skEdit, TextMate, or Notepad++.

Third, you need to stop using your hosting cPanel, Plesk, or other control panel to go to the file manager or FTP add-on screen in the browser. People who edit files on the server should use an FTP client. I’m a Mac guy, so I use Transmit 4 (one of the best $30 I spent on my Mac software library) and there are a few good options for Windows. This will let you navigate to the theme folder on your host and directly open a file so when you save it, it loads the update to the server and you can refresh the browser – more importantly, it lets you undo a mistake and go back many steps in history to recover a from a string of mistakes.

What are some basics?

The questions that are most easily addressed in a general post like this are CSS issues. These are typically questions about the appearance, spacing, alignment, or other visual cues. Sometimes something can be handled with either CSS or PHP, such as having something not appear on certain pages, like single posts. Let’s look at the CSS items first.

CSS

It’s a rather simple syntax to get the hang of the majority of layout and appearance items necessary to wireframe a site or change up the text appearance on a site pretty significantly. With the exception of adding Google Webfonts to a child theme via the functions.php file, 98% of font edits will be done in CSS. Here are some common attributes and links to their use:

text-align
text-transform
font-decoration
color
font-family
font-size
font-weight
min-height
margin
padding
background
border
list-style-type
box-shadow
text-shadow
opacity
width
height
float
postion
display
overflow
clear
max-width

PHP

PHP is more of a programming language than CSS, which is just syntax that can do some neat stuff. With PHP, you can add information to the database, connect to remote services, jump in and out of HTML syntax, and construct new plugins and themes. It is the backbone of WordPress. Here is what PHP looks like for one of the child theme’s functions.php file:

PHP code

There are two main places to look for how to change something that doesn’t look like it’s a CSS edit: functions.php and the page template being used (home.php, page_landing.php, etc.). Once in there, the themes are documented well enough that you should be able to find what you’re looking for and try to alter or remove code.

This is how the majority of us learned PHP – by breaking hundreds of things and learning from those mistakes. You WILL break things and you WILL get frustrated. It’s best to learn on a development install rather than your live site, but working with real-world situations makes you very strong in what you learn.

Genesis Framework Genesis Framework

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Recent Posts

  • Change Genesis .site-title H1 Wrap on the Homepage
  • The Year of 2017 Goals for Petersen Media Group
  • Forever to Finish, Gone in the Blink of an Eye: 2016
  • Add Genesis Custom Post Type Archive Settings
  • Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

Recent Comments

  • Mike Hale on The Year of 2017 Goals for Petersen Media Group
  • Little Shiva on The Year of 2017 Goals for Petersen Media Group
  • Luke Cavanagh on A Response to the WordPress Customizer Expansion: Removal
  • Chris Johnson on Why Partnerships Often Don’t Sail
  • divakara ganesh on Two Things You Need to Do to Your Genesis 2.2 Theme

Archives

  • January 2017
  • August 2016
  • May 2016
  • October 2015
  • September 2015
  • August 2015
  • June 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • May 2014
  • April 2014
  • February 2014
  • January 2014
  • November 2013
  • September 2013
  • July 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • January 2000

Categories

  • Business Tips
  • Genesis Framework
  • Investments in You
  • Products
  • Technology
  • Uncategorized
  • WordCamp Slide
  • WordPress Tips

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Footer

Petersen Media Group was founded on the idea that good work, transparent and honest communication, and radical generosity are the keys to success in business and life.

The WordPress community has shown up over and over to prove this to be true.

We look forward to being entrusted with your business.

Navigation

  • Home
  • About Us
  • Blog
  • Choose Your Plan
  • FAQs
  • Contact
  • Disclaimer

This site is independently owned. It is not sponsored by StudioPress, WP Engine, WordPress, or Automattic Inc.

Theme and various assets used with permission from SEOThemes and GenesisSiteCare.

Copyright © 2019 · Petersen Media Group