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 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...
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....
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...
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;...
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...
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...
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...
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...
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...
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....
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...
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...
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....
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....
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...
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...
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...
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...
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:...
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.
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...
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...
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...
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' ); //...
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...
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';...
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:...
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...
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 frontend of your...