I'm new to using Magento, I have a question for you.
How can I load the contents of the Magento Top menu into hover, only when you do the hover and not at the first landing?
Let me explain, I have a phtml file and I would like it to be loaded only when I'm hovering on the Top Menu
<?php
/**
* #var $block Menu
*/
use MyStore\Widget\Block\Widget\Menu;
?>
<div class="header-widget-block">
<?php if($block->getData('link')): ?>
<a href="<?= $block->getData('link') ?>" class="header-widget-link">
<?php endif; ?>
<?php if($block->getData('image')): ?>
<div class="header-widget-image d-lg-block">
<img loading="lazy" src="<?= $block->getData('image') ?>" alt="<?= $block->getData('title') ? $block->getData('title') : '' ?>">
</div>
<?php endif; ?>
<?php if($block->getData('title')): ?>
<div class="header-widget-title">
<?= $block->getData('title') ?>
</div>
<?php endif; ?>
<?php if($block->getData('link')): ?>
</a>
<?php endif; ?>
</div>
This is my phtml file.
I would like if not possible for each hover as it is dynamic, that it is loaded at least after the complete loading of the page
I would very much like to know this too. Our menu has around 1500 categories and this means at least twice that number in DOM elements, which is a performance killer, sometimes not necessary if the user does not initiate the menu at all.
Related
I'm creating a portfolio page using "WordPress posts" (this is so it spits out single.php pages nicely for me) using PHP and ACF. I'm trying to find a way to put each "category" in its own div. This would allow me to style the layout of the content within each filter. Please see the example below. Maybe I should be doing this a different way?
• Filter 1 - 1 column layout
• Filter 2 - 3 column layout
example of filter 1
example of filter 2
TLDR: Trying to put the content of each WordPress category in its own div.
<div class="work">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
<div class="work-copy">
<div class="category">
<?php echo get_the_category_list(); // Display categories as links within ul ?>
</div>
<h2 class="headline">
<?php the_title(); ?><i class="fal fa-chevron-right"></i>
</h2>
</div>
</div>
<?php endwhile; ?>
WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.
For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.
Category class added to body element by WordPress
You can use this CSS class to style each individual category differently by adding custom CSS.
You can find more details here
Quite a simple fix after doing some research, here is the answer I found useful;
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>">
Place this within each post. In order to style each div class individually, you need to place a containing div in between the if / while statement. Then you'll the place content of each "category filter" with the div.
<?php if ( have_posts() ) : // Do we have any posts in the database that match our query? ?>
<div class="work-container">
<?php while (have_posts()) : the_post(); ?> <!-- Finds the post -->
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>"> <!-- This calls out the Category in the WP Post -->
<div class="work-group">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
This was answered here and with a bit of playing I got it to work, Hope this helps someone! Get the name of the first category
did read alot on stackoverflow and wordpress documentation but nothing works
iam using newest WP version
i createt a template named contact.php
<?php
/*
* Template Name: Contact Template
* description: >-
Page template
*/
get_header();
?>
everything works , you can choose the template in wp admin dashboard when creating a new site
but the post loop dosent work. only on the index.php
this code i use in index. works fine. if i copy over to my template it will not load the posts
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="col-12 mt-4 mb-4 justify-content-center text-center">
<a href="">
<h1><a href="<?php the_permalink(); ?>">
<?php the_title(); ?> </a></h1>
</a>
<hr>
<p> <?php the_excerpt(); ?> <br> </p>
<style>
img {
height: 200px;
width: 200px;
border-radius: 20%;
}
</style>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?><br>
<p> <?php the_author(); ?> <?php the_date(); ?><br> </p>
<p></p>
</div>
<?php endwhile; ?>
<!--end the while loop-->
<?php else : ?>
<!-- if no posts are found then: -->
<p>No posts found</p> <!-- no posts found displayed -->
<?php endif; ?>
<!-- end if -->
</div>
Actually when you create a new template into Wordpress theme folder directory you should copy from the one that is used from your template to render the post list.
As you can see here from wordpress documentation index.php is just the deepest level wordpress reach if it doesn't find any other suitable template.
If you are unsure of what template to use i suggest you to install query monitor and see from the wpadmin top bar in your frontend which is the template for a standard post loop page.
If you copied from the correct template there should be no standard reason of why that should fail. If it doesn't work for you what i can suggest is to see if the problem still happens with default template (like twentytwenty) or disabling all your plugins.
I'm using the following code to display recent posts from a specific category on the homepage of my WordPress website.
<div class="frontleft">
<div id="four-columns" class="grid-container" style="display:block;">
<?php $catquery = new WP_Query( 'cat=3&posts_per_page=24' ); ?>
<ul class="rig columns-4">
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</a>
<h3>
<?php the_title(); ?>
</h3>
</li>
<?php endwhile; ?>
</ul>
</div>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
<?php } ?>
</div>
</div>
Issue: WP-pageNavi plugin isn't working correctly.
Note: I'm able to open website.com/page/2 without having any issues. But the post list is precisely the same on each page.
How to fix it?
If I were you I would just use different Page Templates for homepage and other pages.
It's hard to debug a plugin that we aren't using.
There is a function in Wordpress is_page() where you can input the name of the page in the para. Throwing that in an if statement is also another way to separate the posts.
There are a ton of ways to achieve what your looking for without the use of a plugin.
Here I have a Wordpress theme, which is working fine.
Now I want to append my custom div under existing content. here are 2 existing panels which are following:
I'm new comer in WordPress so kindly assist me, how to achieve this requirement. your kind efforts would be heartily appreciated.
STEP 1: Open your wp-content->themes->your Theme Name-> footer.php
at very top beginning add div there but make sure it will show on all page.
Example:
<div class="infooterfile"></div>
<footer>
<div class="footer-wrap">
<div class="icoach-section">
<div class="footer-logo fadeIn animated">
<?php
$icoach_dark_logo=get_theme_mod('icoach_dark_logo');
$icoach_dark_logo=wp_get_attachment_url($icoach_dark_logo);
?>
<?php if($icoach_dark_logo != '' && !empty($icoach_dark_logo)): ?>
<img class="img-responsive" src="<?php echo esc_url($icoach_dark_logo); ?>" alt="<?php esc_attr_e('Logo','icoach');?>">
<?php endif; ?>
</div>
NOTE: If you want to show it only home page then you need to add div above <?php get_footer(); ?> in home page separate template.
EXAMPLE: in homepage separate template
<?php
/**
* The main template file
**/
get_header(); ?>
<div class="heading-wrap blog-heading-wrap" >
<div class="heading-layer">
<div class="heading-title">
<h1><?php _e('Blog ','icoach'); ?></h1>
</div>
</div>
</div>
<div class="yourdiv"></div>
<?php get_template_part('content'); get_footer(); ?>
I am creating my own custom theme from scratch and have run into a bit of trouble. On the blog page, each time a new post is displayed, it is smaller than the last. This is due to me setting the width of the blog post to 33.3%. Also each blogpost gets displayed slightly right of the one previous to it. How can I have each blog post be 33.3% of the content area and be displayed side by side, 3 per row? I am using wordpress functions to call each blog post. I am only displaying the blog posts thumbnail and when you click the thumbnail it takes you to the post. So basically 3 images side by side.
[BONUS]: How could I get text to display horizontally and vertically on hover over each blog post image?
I know this is a lot to ask, but I have been trying to work this out for days. A JS Fiddle or Codepen would be greatly appreciated.
Index.php:
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
You should use bootstrap and do something like this :
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div class="col-md-4">
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Take care to remove the width: 33.33%; CSS rule and close your <div> tags in the loop, not after.
Hope it helps
[EDIT]
See this link for more information about how to use column classes with bootstrap : grid example basic
[EDIT #2]
You could do it without bootstrap but it will be a bit more difficult. You'll have to set the "display" to "inline-block" and set the width of the divs with taking care of the inherit margin of these tags. In this example, I had to set it to 32%. Here is the fiddle