Blog page layout part 3

Beans-blog-page-custom-layout

A blog page layout added to the index.php file. Thumbnail in the top. Post title below. Category and date. Then the text and a Continue reading link. I added a CSS scale affect on hovering the images.   In the...

Read more..

Sticky header and footer

Beans-sticky-header

There is a quick way by using UiKit sticky to stick really any area of the page.   //UIkit sticky header beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' ); beans_add_attribute( 'beans_header', 'data-uk-sticky', "{top:5}" );   The CSS /* Sticky Header - https://community.getbeans.io/discussion/enable-a-sticky-header/...

Read more..

Back to top

Back-to-top link

The following code needs some work. I will add this tutorial anyway. As it shows a method for Beans to add a back to top link. I will also add another solution below it. As one scrolls closer to the...

Read more..

Add search

Beans-menu-search-icon-open

There are a few different ways to add a search box. I will show you a few of them. This code adds a search box to the primary menu. I added if statement so that the search box will only...

Read more..

Show site title and logo

Beans-site-title-and-image-logo

  I asked the question "How do I show the the site title and logo at the same time with Beans?" at the Get Beans forum. Tonya replied. The below result shows a modified version of the code that Tonya...

Read more..

Attributes and Markups

Beans-data-markup-ID-primary-menu

There are attributes and markups in Beans that can be adjusted to adjust the HTML layout of the page. NB! Turn on Beans development mode. By going to: WordPress Admin -> Appearance -> Settings. An example of moving a header...

Read more..

Enable Author Bio Box

Beans-author-bio-box

Here is some code to enable the author bio box. Many web sites have an author box at the end of a post. The below code shows how to add the author box to a post page. Here is the...

Read more..

Adjusting Post Meta

Beans-post-meta-nicer-icons

I will show how to adjust the post meta area that is seen before the post content. To reorder, remove, add icons and add some styling. Making it look a lot better then the default that can be seen today....

Read more..

Creating a blog page layout part 2

Beans-child-theme-default-blog-page

Adjusting the post preview elements of the blog page. The default view of blog page post in the official Beans child theme.   Modifications Most of the below code is to be added into the child theme functions.php file. It...

Read more..

Blog page layout part 1

Beans-Blog-Grid-Layout

Here are some of the various grid possibilites with the blog layout. There are many more. Please share so that I can add it to this tutorial. The default blog grid layout shows the post title, meta information and then...

Read more..

Add a new menu

Beans-Add-menus

The following are examples of adding a menu above and below the header, and inside the footer. Here you can see the Customizer -> Menus -> View All Locations. The Primary Menu, Preheader Menu, Secondary Menu and the Footer Menu....

Read more..

Add a widget area part 2

Beans-Customizer-Footer-Widgets-Layout

I will likely add on a lot to this widget area part 2 tutorial. Right now I have code that Yan shared on the Get Beans forum, and another footer widget code just below it also picked up at the...

Read more..

Add a widget area

Beans-data-markup-id-sections

The default widget areas in the official Beans Child theme with a left and right sidebar layout contains: Sidebar Primary Sidebar Secondary Off-Canvas Menu   To locate the various areas one can add a widget into one can download the...

Read more..

Replace header image with featured image

Beans-featured-header-image

Adding the featured image as header image. Here is an example of using the featured image as a header image. Here is the Tutorials blog page that uses a specific image that I defined through the below code. If you...

Read more..

Background Image

Beans-full-screen-background-image

There are different ways to add a background image. Add a background image through the Customizer Go to the Customizer and add a Background image. I adjusted to Fill Screen and Image Position top left. The background image is seen...

Read more..

Styling a Menu

Beans-Inspect-Chrome-menu

The default styling of the top right primary menu looks like this:   To style the menu we need to figure out the CSS that is attached to each element that we need to style. Go to the frontend and...

Read more..

Styling the Site Branding

Beans-Site-Branding-custom

Here are some suggestions on styling the Site Branding which includes the Site title and the site title tag. The default is styled like so: Site Branding alternative styling.   CSS used: .tm-site-branding, .tm-site-branding a { font-size: 38px; line-height: 24px;...

Read more..

Including multiple files

There are different ways to include multiple files.The functions file can fairly fast become very long with a lot of code. One can then split off the code into logical files and then add the file to the functions file.

Read more..

Adjusting sidebar layouts

Beans-new-sidebar-layout

Below I will show you the code for the various sidebars. How to force a layout. Then how to add a new sidebar layout. The layout acronyms: c = full width content. c_sp = content left with right primary sidebar....

Read more..

Editor-style backend CSS

Twenty-Sixteen-Editor-stylesheet

I am looking into changing the backend content creation screen as can be seen in the Beans Child theme today. From this:   and instead using the Twenty Sixteen editor stylesheet. So it looks like this:   To make the...

Read more..

Bottom copyright information

Beans-WPBeansFramework-copyright-section-footer-center

What we will see below are various code examples one can use for the footer copyright section on the site. At the bottom I also have code for adding the copyright footer section to the Customizer.   A left and...

Read more..

Code Snippets

Beans-Code-Snippets-featured-image

Here are various Beans code snippets that I find useful. Place these into the child theme functions file.   // Remove site header - https://community.getbeans.io/discussion/remove-header-from-cpt/ beans_remove_action( 'beans_header_partial_template' ); //Remove site title beans_remove_action( 'beans_site_branding' ); //Remove title tagline beans_remove_action( 'beans_site_title_tag' );...

Read more..

Change Default phrases

Beans-post-meta-prefix

Here are some examples of adjusting the default phrases used in the Beans Framework child themes. Begin by enabling Development Mode. Then go to the front page and the page where you see your posts. Right click the Posted on...

Read more..

Conditional logic

There are many times that I need to use conditional logic for various code. Below I am sharing some of the various conditions I have used. Remember to check the resources at the bottom for additional information. Here are some...

Read more..

Rename the child theme

I will now change the Beans Child theme to something else. Open the style.css. The following text is seen: /* Theme Name: Beans child Description: Starter Child Theme for the Beans Theme. Author: Beans Author URI: http://www.getbeans.io Template: tm-beans Version:...

Read more..

Selecting style.less or style.css

As I open an official child theme functions.php file I see this code: <?php // Include Beans. Do not remove the line below. require_once( get_template_directory() . '/lib/init.php' ); /* * Remove this action and callback function if you do not...

Read more..

Enable Development Mode

  To modify your child theme you first need to enable Development Mode in the backend of your WordPress site. Go to: Appearance -> Settings -> and click the checkbox to enable development mode.     Now go to the...

Read more..