Genesis Framework Simple Reference Guide

In Genesis Framework Simple Reference Guide, Let’s start with a small intro about Genesis framework. Genesis framework is most flexible WordPress theme with more customization option. Genesis framework let you develop a site on WordPress in a way you want it. If you prefer WordPress for development this framework will give you more power and flexibility to develop the website. You can create your own customized theme using Genesis framework.

Genesis Framework Simple Reference Guide

 

Genesis framework is one-time purchase.

So, it’s worth buying and use it for multiple site development

Genesis Framework Simple Reference Guide

Genesis framework’s customization based on the hooks, filters. Using these options you can develop a website right from the scratch.

Hooks –   Inject the desired code at desired place without changing any WordPress default file.

Filters – allow you to modify/decorate  the existing function

Download and install the Genesis Theme and also install the child theme for Genesis and activate it.

Do all the customization in child themes function.php

This will keep the parent theme clean.

You can put your custom contents section in the required place by creating/registering the sidebar and  hook it in function.php ( child theme)

Refer the below image for the Genesis Hook guide

Genesis Framework Simple Reference Guide

the hook guide will help you to understand the names given to refer section of the website. Use this hook name to replace it with required custom contents.

Registering sidebar in Genesis

If you want to put your custom HTML code or content in place of the hook names, first you need to register the sidebar. The registered sidebar will appear in the Appearance – > Widget section of the WordPress.

Once the register sidebar appears in the widget section drag drop the require widget to the corresponding sidebar. You can also insert custom content blocks to the registered sidebar. These content block let you add custom codes.

genesis_register_sidebar( array(
 'id'          => 'menu_header_right',
 'name'        => __( 'Menu - Header Right', 'custom_name' ),
 'description' => __( 'custom_description.', 'custom_name' ),
) );

Add the above code snippet to the child themes function.php. Now you can see the new sidebar available in widget page with the name mentioned in the code.

Genesis Framework Simple Reference Guide

Hook the registered sidebar

After registering the sidebar,  we need to determine the place where the appropriate sidebar needs to be hooked.

add_action( 'genesis_header_right', 'menu_header_right');

function menu_header_right() {
 if (is_active_sidebar( 'menu_header_right' ) ) {
   genesis_widget_area( 'menu_header_right', array(
  'before' => '<div class="menu_header_right widget-area"><div class="wrap">',
  'after' => '</div></div>',
  ));
 }
}

This piece of code will hook the custom sidebar in the place of  “genesis_header_right”  as mentioned in the hook guide. With the help of  ‘before’ & ‘after’ attribute, you can wrap side bar with a custom HTML & class for styling.

Genesis Filters

Filters in Genesis tends access to modify the result of the existing function. I will explain the filter concept with the example.

In a breadcrumb, the default separator will be “/” and the breadcrumb will look like “Home/some_page” If I want to modify the default separator of the breadcrumb from “/” to “>” which can be achieved by filters.

function change_breadcrumb_separator( $args ) {
   $args['sep'] = ' > ';
   return $args;
}
add_filter( 'genesis_breadcrumb_args', 'change_breadcrumb_separator' );

Genesis general settings

Apart from the custom hooks & filters Genesis framework has some general settings.

  • Default site layout
  • Section for adding logo image
  • Breadcrumb options
  • Comment and Track Backs
  • content archive
  • Blog page template
  • Header / footer scripts.

These titles itself reveal the core purpose of the settings.

Genesis framework simple reference guide gave a basic idea about implementation for more hooks and filters visit the link below.

Most common hooks in genesis framework used for website development are available here.

Ready made themes also available in Genesis framework. Check it out!

Popular Frontend Framework you must try at least once.

Web development reaches new era after the HTML5 and CSS3. The frontend framework is the first thing hits our mind whenever we hearing the word “Let’s develop a new website”. While architecting the project everyone prefer to use the popular front-end frameworks.

frontend-frameworks

This is common that the people like to walk on their legs, Some crazy guys do it by hand, am sure it will be more fun while walking with hands. similarly, I decided to try some of the frontend frameworks which are not that frequently used as Bootstrap and Foundation.

Let’s have some fun!

Here come the heads up for some framework I tried.

Materialize

materialize

Materialize is a modern responsive framework based on the Google’s material design. The materialize frontend framework also support SCSS (CSS preprocessor). It had its own package of icons, button styles, cards etc. The developer who knows less about designing and want to implement the material design then this is the right pick.

Materialize have their own portal for showcasing the websites which are developed using their framework

UIKit

uikit css

UIKit is one of the remarkable frontend frameworks which has the both LESS  & SCSS support. It is considered as highly modular front end framework. The special admiring part of the framework is the naming conviction used for the class.

This framework suits for the developer who have basic knowledge on front end development.

Pure

pure

Pure is a remarkable responsive framework from the popular brand YAHOO! It’s well known for its light weighted CSS modules. Pure doesn’t have JS support library.

Pure is preferred for the developer who wants to develop a responsive site rapidly with lightly weighted frontend framework.

Skeleton

skeleton css

Skeleton is more light weighted when compare to Pure as it only has the basic modules to build a responsive design.  Even though it is lightly weighted skeleton is bare enough to develop a small responsive web application. It also have the responsive grids, and basic components like buttons, forms, table, list etc.

The web development doesn’t require all the styling of the large framework then skeleton is a preferred choice

Numerous frameworks are available now., in which I listed the frameworks that I  tried and admired.