How do I build a page structure?


Thanks Thierry

I decided to make each sidebar by just bring a loop of post titles into an aside. Works fine.

Still really struggling to fix the header appearing on the events page. I've tried the if statement above to target the page, the template type etc and just can't get this to work. Here's the code I used:

add_action( 'beans_header_after_markup', 'example_hero' );

function example_hero() {

 // Example: if condition is met, stop here and don't run the rest of this function.
    if ( is_page_template( '/wp-content/plugins/the-events-calendar/src/views/default-template.php' ) )
        return;

    ?>
    <div class="tm-child-hero uk-flex uk-flex-center uk-flex-middle" style="background-image: url(<?php the_field('hero_image'); ?>);">

        <div class="my-container-center uk-grid uk-flex uk-width-large-2-3 uk-width-medium-1-1">
         <div class="uk-container uk-flex uk-flex-middle uk-width-1-1 <?php echo get_field( 'hero_position'); ?> <?php echo get_field( 'hero_align'); ?> ">

              <div data-uk-parallax="{opacity: '0', viewport: 0.5, y:-100} " class="uk-width-large-1-3 uk-width-medium-1-1">

                  <h1 class="text-reverse my-hero-headline"><?php echo get_field( 'hero_title'); ?></h1>

                  <h3 class="my-hero-description"><?php echo get_field( 'hero_description'); ?></h3>

              <?php if ( $hero_button_text = get_field( 'beans_child_hero_button_text' ) ) : ?>
                 <p><a class="uk-button  my-button-outline-white uk-button-large" href="<?php echo get_field( 'hero_button_link'); ?>" title="<?php echo get_field( 'hero_button_text'); ?>"><?php echo get_field( 'hero_button_text'); ?></a></p>
            <?php endif; ?>

              </div>
          </div>
      </div>
    </div>

Also tried to make the custom fields not available to the post type from the admin area but no success.

My events page is created using the events tribe plugin - might that shed any light?


Hi Jason,

You could exclude it for tribe_events post type posts as such:

add_action( 'beans_header_after_markup', 'example_hero' );

function example_hero() {

    // Stop here if the current post type is tribe_events.
    if ( get_post_type( get_queried_object_id() ) === 'tribe_events' )
        return;

    // All the code displaying the here....

}

Works a treat, thanks Thierry.

If I wanted to add a class to the beans_main_grid just for those event pages, how would I do that?

Cheers Jason


Hi Thierry

I just noticed that the sticky header I'd triggered in my functions.php file is working on page templates that I didn't create (the news post page for example) but isn't working on pages that use my templates.

I begin those templates with for example:

<?php
/**
 * Template Name: Single-Coaches
 * Description: Used as a page template to show page contents, followed by a loop through a CPT archive  
 */

get_header(); ?>

Is that correct?


Hi Thierry

I seem to have broken my news page (post page). I created an index.php to use for my home page layout etc and I think that has overriden the default template used for the blog posts.

I've deleted the file from the server but it still seems to be using the template somehow.

Is there another way to resolve this?

Cheers Jason


Hi Thierry

Ignore my last note - my post page is fixed. The sticker header only works on this page and not on any of the templates I've created - still can't figure that one out.

Chers Jason


Hey Jason,

Regarding adding a class to beans_main_grid only for the event pages, you have two way to go about it.

Solution 1 (recommended)

The best way in this case is to add it via your child theme functions.php in which case you will have to wrap it in a condition. Here is the trick, WordPress Conditional Tags are not available directly in functions.php as you can read here (see the "warning" part). So to have access to it, you need to wrap it in a wp action callback which you will see very often for code snippets meant to be added in functions.php. Here is what your code would look like:

add_action( 'wp', 'example_document_setup' );

function example_document_setup() {

  // Only add attribute to single event pages.
  if ( get_post_type( get_queried_object_id() ) === 'tribe_events' )
    beans_add_attribute( 'beans_main_grid', 'class', 'your-class' );

}

Solution 2

The other solution is to add your modifications in the template file which is more complicated in this case because of the way Tribe Events work. Since Tribe Events use their own template files, you will have to look at their documentation to see how to overwrite a template file (it will make you realize how easy and flexible Beans is :-)). Once you have it working, will you add all your Beans modifications such as beans_add_attribute( 'beans_main_grid', 'class', 'your-class' ); at the very top of the template file, just below the php opening tag.

Regarding your header, you would never call get_header() in Beans templates. It is important to understand that all blocks on the page are fragmented in functions which are attached to actions. So everything can be modified, removed or replaced using Beans Actions API. Regarding the sticky header, I think Chris shows how to do it in this video. If I remember well, he uses the beans_before_load_document action in functions.php but you should use the wp action as explained above.

Jason I am indeed always willing to help, that said, I will kindly ask you to do some research before jumping on the forum as some of the answers above are specific to Tribe Events or already explained in Beans documentation and other discussions on the forum πŸ™‚

Thanks,


Hi Thierry

Thanks and sorry if I'm becoming painful.

With regard to what you said above about page templates not calling the header like that - if I remove the get header command, I get no header. Not sure if I've made a mistake in the way that I've set up the templates but they seem to be working other than the fact that they seem to be overriding the sticky header command from the functions.php file.

Here's a sample of one of my page templates - is this incorrect?

I open the file with:

Then have some html structure and finish with:

Cheers Jason


Hi Jason,

You are by no mean painful, it is also part of the forum assistance to point users to the documentation where they can find answers as well as other discussions πŸ™‚

Regarding your themplates, every template that this managed by Beans (99% of the time), it will look as follow:

<?php

// Your template modifications.

// Load the document. Always Keep this at the bottom of the template files.
beans_load_document();

When it comes to plugins like Tribe Events, they control their own template which calls Beans header and footer and replace the main content with their own. To overwrite their template, you will have to copy and paste their entire template file. For example if you want to overwrite Tribe Events default-template.php, which is their root template, your template in your child theme would be tribe-events/default-template.php (according to their documentation) and would look as such:

<?php
// Do all you Beans modifications here.

get_header();
?>
<div id="tribe-events-pg-template">
 <?php tribe_events_before_html(); ?>
  <?php tribe_get_view(); ?>
  <?php tribe_events_after_html(); ?>
</div> <!-- #tribe-events-pg-template -->
<?php
get_footer();

Notice in this case how they call get_header(); and get_footer() to get Beans "wrapping" content. Beans is built to work perfectly fine with this type of plugins.

All Beans modifications made in functions.php which applies to the header and footer will apply to the Tribe Events pages (besides content modifications since they overwrite it).

Hope that makes a bit more sense,


Thanks Thierry,

This is so strange. All my template files are all set up as per the latter example (calling the header and footer). If I try to remove those I get errors and the page doesn't display. I've looked hard at the markup and can't see what I might be doing wrong. Like I said the templates seem to work fine but the sticky header is broken on my templates.

Am I correct in thinking the template structure is as follows:

<?php
/* Template Name: ... */

// My modification.

beans_load_document();

Cheers


Hey Jason,

At this stage, I think it would really help to see your code. I have sent you a private message so that you can send it over to me and will update this discussion once we got down to the issue so that other users can benefit from it.

Thanks,


Just a quick update on this post.

I had a relatively long conversation with Jason and looked at his child theme. It turn out that Jason was taking a more conventional approach by overwriting every template file and include get_header() and get_footer instead of taking the Beans approach which is only modify what you want and call beans_load_document at the bottom of the template file.

I would like to give a big kudo to Jason who comes from a static HTML background and is now jumping into WP and PHP πŸ™‚

Happy coding,


Hi, Thierry!

What an interesting discussion!

This interests me. So... I managed to create the hero, just as you explained.

Can you help me with four things, please:

1) I would like to center vertically the hero text. It appears close to the top of the image.

2) I would like to insert different header sizes in the hero text. Is it posible? I wasn't successfull in creating in array 'beans_child_hero_text', 'label' => __( 'Hero Text', , 'beans-child' ), 'type' => 'text'

3) I got lost when you talked about the grid on the first page. I'd like to insert a grid post loop on the home page along with my content. I already managed to make a grid layout for my blog page, but not in a static page.

4) what would be the best way to have the parallax effect on that hero image?

Thanks in advance for your help.


Hey Sami,

I would love to write you code snippets for all your questions but it is unfortunately not possible for me time wise. That said I am happy to point to you to the right direction πŸ™‚

  1. To center things in your hero block, I would use UIkit Flex component (note that you will have to enqueue the flex component before using it).
  2. I am not sure what you mean by that, are you using widgets in your hero block or just hard coded content?
  3. Are you asking how to add a grid in your content?
  4. To center things in your hero block, I would use UIkit Parallax component (note that you will have to enqueue the parallax component before using it).

Thanks,


All right, then. Let's see.

I understand what you mean... But, please help me somehow, if posible. It goes beyond my understanding.

1- In functions.php I tried:

// flex component //
add_action( 'beans_uikit_enqueue_scripts', 'uk-flex' );

// parallax component //
add_action( 'beans_uikit_enqueue_scripts', 'data-uk-parallax' );

Is it the correct way to enqueue the flex component (and the data-uk-parallax)?

I realized that I need to assin the .uk-flex-wrap-middle property to beans-child (?) in css. I don't know the mechanics of that, I'm sorry.

2 - I'm using the backend in wordpress, that appears when I edit the page. Just followed the procedure you told Jason. In wordpress it appears "Hero title". "Hero Button" and Hero button link" I even created a new array, called "hero text", which appears in the wordpress backend but the text input there wouldn't appear in the frontend. My purpose was to create this array setting a text smaller then the one in "Hero title". This is my failed code in functions.php:

array(
    'id' => 'beans_child_hero_text',
    'label' => __( 'Hero Text', 'beans-child' ),
    'type' => 'text'

The idea would be to make the Hero text array H3, for instance. 3 - The grid for the post loop. I managed to create one for my blog page. I got it partially from Banks theme. I only want to show the post loop as a grid in a static page, together with the content. 4 - The same thing as in #1 I don't really understand the mechanics.

Thanks for your help.

Cheers.


Just one more thing: what is the best way to take the page title out of a specific page? Is there some kind of code I can insert in the html of the page document to achieve that?

Or at least, I'd be hapy to at least take the page title from the home page.

Nevermind on this one. I used .uk-hidden and will insert page titles in wordpress post editor.

Just mind the other questions, please.


Hey Sami,

Regarding removing the title, you can use beans_remove_action( 'beans_post_title' ); instead of hidding it. This will prevent the title from loading on the page with is much better than hidding it.

When it comes to the other questions, I am afraid but I can not go as far as teaching how WordPress actions and PHP functions work, it really goes beyong the level of support I can offer but I can point you to the right direction. Regarding enqueueing UIkit compontents, please refer to this article. When it comes to fields, their values aren't automatically displayed in the frontend indeed, it is up to you to use it according to your needs. You will see that it is explained how to retrieve fields values in this article.

Thanks in advance for understanding that I cannot go in depth with teaching WordPress, PHP or CSS eventhough I try to best I can to do so when possible.

Happy coding,


Hey Sami,

Regarding removing the title, you can use beans_remove_action( 'beans_post_title' ); instead of hidding it. This will prevent the title from loading on the page with is much better than hidding it.

When it comes to the other questions, I am afraid but I can not go as far as teaching how WordPress actions and PHP functions work, it really goes beyong the level of support I can offer but I can point you to the right direction. Regarding enqueueing UIkit compontents, please refer to this article. When it comes to fields, their values aren't automatically displayed in the frontend indeed, it is up to you to use it according to your needs. You will see that it is explained how to retrieve fields values in this article.

Thanks in advance for understanding that I cannot go in depth with teaching WordPress, PHP or CSS eventhough I try to best I can to do so when possible.

Happy coding,


Hi again,

I understand. I managed to get some results. Just have one question now. Can you tell me how can I identify proprely the div for the text container in the child hero so I can change the font color? I tried the divs .uk-text-center .uk-contrast, .uk-h1 and even in .tm-child-hero... No change.

Nevermind. Solved it directly in functions.php (setting the style for hero child h1) I'm afraid it isn't the most appropriate way to do it, but it's the only way I was able to do it. Thanks

  • 1
  • 2

Write a reply

Login or register to write a reply, it's free!