{"id":406,"date":"2018-10-25T06:28:34","date_gmt":"2018-10-25T06:28:34","guid":{"rendered":"http:\/\/www.projectimmerse.com\/?p=406"},"modified":"2020-06-17T09:45:56","modified_gmt":"2020-06-17T09:45:56","slug":"the-genesis-framework","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/the-genesis-framework\/","title":{"rendered":"The Genesis Framework"},"content":{"rendered":"

I’ve been running into the WordPress Genesis theme<\/a> as of late. It’s not your standard wordpress theme when it comes to modifying template files. Genesis is actually a framework, that would be a better way to describe it. Genesis frameworks extend their functionality, allowing developers to customize their WordPress site. <\/p>\n

The Genesis framework is built by Studio Press<\/a> – I\u2019m quite impressed with their work actually, it sounds like a solid framework I just need to learn more about it. So I dove right in – I scoured the internet for some learning material and a good list came up. This can only take you so far though – the best way to really learn is actually do it yourself, so that\u2019s what I\u2019m gonna do. <\/p>\n

<\/p>\n

What\u2019s the catch though? Well this is a paid framework, meaning I have to actually purchase it through their website. Well that sucks, then again it really doesn\u2019t – these guys and gals put some work into this, they deserve it. Fortunately for me, I\u2019ve got a project handy to work with – an existing website that is running on a Genesis Framework. <\/p>\n

So what was the task? Well I had to modify and add a list of functionalities to their blog, just their blog area. And if you know wordpress, you know that you\u2019re working with template files, functions, and in this case – hooks. Yeah hooks, a super modular approach to theme building. I wasn\u2019t use to this, I mostly build on standard wordpress files. The second part to this specific build was the front end – the layout, so there was going to be some CSS involved here. Not to mention responsive media queries. <\/p>\n

These hooks can be placed directly on a template file or within the functions.php file, they\u2019re all basically functions. <\/p>\n

So within the functions.php file, hooks can be implemented like:<\/p>\n

\r\n\r\n\/** Add Viewport meta tag for mobile browsers *\/\r\nadd_action('genesis_meta', 'add_viewport_meta_tag');\r\n\r\nfunction add_viewport_meta_tag() {\r\n  echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';\r\n}\r\n\r\n\/** Add support for custom background *\/\r\nadd_custom_background();\r\n\r\n\/** Add suppport for custom header *\/\r\nadd_theme_support('genesis-custom-header', array('width' => 960, 'height' => 100));\r\n\r\n\/** Add support for 3 column footer widgets **\/\r\nadd_theme_support('genesis_theme_footer', 3);\r\n\r\nadd_action('genesis_before_footer', 'my_sample_text');\r\n\r\nfunction my_sample_text() {\r\n  echo '<h2>Thanks for Reading!<\/h2>';\r\n}\r\n\r\n<\/pre>\n
Okay so actually outputting mark up can be done within the functions.php file but how is this different from outputting markup on an actual genesis theme file. Yeah it’s basically the same thing and it gets even worse when you have a layout thats highly customized. <\/p>\n
I sound like I’m complaining here when in fact, Genesis is quite forgiving. There are a good amount of hooks that are natively built in. For instance in the example above, we can use ‘genesis_theme_footer’ without calling a function, however all we need to do is pass it an argument which is ‘3’ for a three column layout. Well that’s super handy. <\/p>\n
We can also remove some components like:<\/p>\n
\r\n\r\n\/** Remove Header *\/\r\nremove_action( 'genesis_header', 'genesis_do_header' );\r\n\r\n<\/pre>\n
Here’s a powerful one, I’m not sure I’d use it often for layouts that require some heavy customization but still powerful. <\/p>\n
\r\n\r\nfunction do_full_width_content() {\r\n\r\n  echo genesis_get_custom_field('full-width-content-1');\r\n\r\n}\r\n\r\n<\/pre>\n
The ‘genesis_get_custom_field’ is a powerful hook – it let’s us access a natively built in field from the custom fields area. You can see this while you’re editing the page – within WordPress’ backend.<\/p>\n
What are some other hooks we can use? Well here is a nice reference – Genesis Hook Reference<\/a>. Additional documentation can be found right on Studio Press website – Snippets<\/a><\/p>\n
Some other resources with your Genesis theme development are these plugins, so be sure to install these and try them out. <\/p>\n