https://community.getbeans.io/discussion/modifying-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...
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....
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...
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....
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...
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 - https://community.getbeans.io/discussion/enable-a-sticky-header/ */ header.uk-active { background-color: #fff; padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #ccc;...
Back to top
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...
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...
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...
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...
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...
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....
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...
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...
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....
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....
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...
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...
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...
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...
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:...
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.
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...
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...
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...
Code Snippets
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' ); //...
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...
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';...
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:...
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...