Breadcrumbs Hide home before the active link: beans_add_attribute( 'beans_breadcrumb_item_link_inner', 'class', 'uk-hidden' ); Hide the active part: beans_add_attribute( 'beans_breadcrumb_item[_active]', 'class', 'uk-hidden' ) // Remove text muted grey color beans_remove_attribute( 'beans_breadcrumb_item', 'class', 'uk-text-muted' ); // Add uikit text primary blue and a...

Read more..

Mobile navigation


Mobile - hamburger menu in Beans. Above 960px the hamburger menu is hidden. // Hamburger button hidden. @media (min-width: 960px) .uk-hidden-large { display: none !important; } On reaching width of 959px the regular menu is hidden: // Regular menu hidden....

Read more..

Custom Post Type in Beans


Custom Post Type in Beans I added two custom post types (in Norwegian). One to create an archive of posts called Edwien. The other for a news section called Nettmagasin. Two custom post types - Edwien and Nettmagasin Above we...

Read more..

Center logo between menu


Here is code to center the logo between a centered menu. The end results for a site I am working on looks like the below. First you need to add the logo into the Site Identity section of the Customizer....

Read more..

Blog page layout part 3


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


Creating a sticky header with UiKit. //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 - */ { background-color: #fff; padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #ccc;...

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


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


  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


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


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


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


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


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


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


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, andanother footer widget code just below it also picked up at the forum....

Read more..

Add a widget area


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


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

Read more..

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


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


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; letter-spacing:...

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


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.sp_c = content...

Read more..

Editor-style backend CSS


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 adjustment I went...

Read more..

Bottom copyright information


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 a...

Read more..

Code Snippets


Here are various Beans code snippets that I find useful. Place these into the child theme functions file. // Remove site header - 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


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 text...

Read more..

Conditional logic

Here are some conditional examples I have used for various tutorials.(These are code pieces.) add_filter( 'beans_layout', 'example_force_layout' ); function example_force_layout() { if ( is_front_page() ) { return 'c'; // Full width content } if ( is_page(contact) ) { return 'c_sp';...

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: 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: As I use CSS. I will then remove (or hide) the code that has to do with less. So that I end up having my functions.php files...

Read more..