EDIT: I did it. I was able to pull in the data, but not sure if this is the right method, but it is working.
I added this to my template file and it works:
include(locate_template('template-parts/data/lemon/data-lemon.php'));
Saw it from this posting: How can I pass a variable from functions.php to the template file in WordPress?
So I have a client that does not want a page builder or Gutenberg, but wants to be able to change the data when needed. This person is not tech savvy, so giving them access to files is not a good idea.
So I thought about using markdown files or even variables. I could have a template, then pull the variables from another template. This way they can change the data but have no access to the file structure.
Here is what I have:
<!-- Variable for Data -->
<?php locate_template( 'template-parts/data/lemon/data-lemon.php', true ); ?>
<!-- Hero Section -->
<section id="hero" class="flex flex-col md:flex-row gap-4">
<div id="col-left" class="basis-2/5">
<h3>
<?php echo $heroSubtitle; ?>
</h3>
<h1>
<?php echo $heroTitle; ?>
</h1>
<p>
<?php echo $heroDescription; ?>
</p>
<div id="button-wrapper" class="flex flex-row gap-2">
<button class="bg-yellow-500 text-white px-4 h-[40px]">
Buy Lemon
</button>
<button class="bg-white border-solid border-grey-100 border-2 px-2 h-[40px]">
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M16.004 9.414l-8.607 8.607-1.414-1.414L14.589 8H7.004V6h11v11h-2V9.414z"/>
</svg>
</a>
</button>
</div>
</div>
<div id="col-right" class="basis-3/5">
<figure>
<img src="<?php echo get_stylesheet_directory_uri(); ?>\assets\img\progessive-img.png" alt="" title="" />
</figure>
</div>
</section>
Then ... I have the variable or data file like this [This is inside the data-lemon.php file]:
<?php
// Variable for the lemon page
$heroSubtitle = 'Meet Lemon';
$heroTitle = 'Build a better site for your business.';
$heroDescription = '[short description here] blorem blipsum dolor sit bamat minim mollit non deserunt ullamco lorem ipsum.';
?>
As you can see in the example I have tried "locate_template()", but I have also tried "get_template_parts" with no luck.
"get_template_parts" works great for getting oher blocks of data into the template file, but not when it comes to variables.
Any idea of what I am doing wrong or if this is even possible.
Cheers
Related
I've created a pods template for my pods archive and I use a shortcode inside of a new wordpress page for diplaying it. I'de like to display a pagination but when I use pagination=”true” pagination_type=”advanced” nothing happend. Can you please tell me what's wrong ?
Here my shortcode :
[pods name="seminaire2" orderby="ezdatedebut asc" template="archive_template_seminaire" limit="5" where="t.post_status in('publish')" pagination=”true” pagination_type=”advanced” ]
My pods template :
<div class="portfolio oceans terres atmosphere" style="display: inline-block;" data-bound="">
<div class="item_paysage">
<a class="item_link" a href="?p={#ID}">
<div class="vignette">
[if ezvignette ]
<img class="img-fluid " src="{#ezvignette._src}" alt="event_img" />
[else]
<div class="substitute_img fa fa-users"></div>
[/if]
<!--<img class="masque" src="http://wordpress.localhost/wp-content/themes/ipsltheme/ipsl/img/masque_paysage.png" alt="Masque IPSL"> -->
<img class="masque noprint" src='[masque name="portrait"]' alt="Marque IPSL">
</div>
</a>
<figcaption>
<div class="img_title">{#post_title}</div>
<div class="propos_img">{#ezdescription} </div>
</figcaption>
<button class="btn nuance-1"><span class="btn_title">Voir + </span></button>
<!--<button class="btn nuance-1"><i class="fa ipsl_sphere"></i><span class="btn_action">Site dédié</span></button>-->
</div>
</div>
<!--FIN PORTFOLIO ITEM-->
how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.
:)
I have made a Wordpress site, which I have migrated from local to a server. I have created a one pager with images in the bottom that links to the different post of my site. I have used the plugin Advanced custom fields in order to make my site editable.
After a lot of searching online, I found that it was not possible to add custom fields to your index php directly but that you could make a template in which you copied all your old code from the index.php into.
I got it to work on my local host by going to Settings - Readings in my wordpress admin panel an under set my homepage displays as static - Homepage (which is the name of my template).
But when I try to do the same thing on the server site, the screen goes white... Maybe it is something with the file structure?
I've taken a screen shot of whole the files are located in my FTP (Cyberduck). I don't know if its enough to help..
Thanks in advance
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image"/>
<lol><h2 id="About">3 Facts</h2></lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block"> <!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src = "<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One"/> <!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>
Template of the static homepage should be stored in a file called front-page.php which needs to be placed in /wp-content/themes/elnino directory.
Copy code of your template (except comment with template name) and paste it inside front-page.php file.
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image" />
<lol>
<h2 id="About">3 Facts</h2>
</lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block">
<!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src="<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One" />
<!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>
I am working on an acceptence test to see if I can go from homepage to categories however no matter what I try I does see the link but I can't click it.
<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('I click category');
$I->amOnPage('/');
$I->seeLink('Categories', '/categories');
$I->click('category');
?>
The HTML:
<div class="col s12 m4">
<a href="/categories" >
<div class="card">
<div class="card-content">
<div class="teal-text center-align" name="category">
Categories
</div>
</div>
</div>
</a>
</div>
</div>
I don't know if Codeception is looking for the 'name' attribute of html tag. Rather than this, you should try other ways of use of click method: http://codeception.com/docs/03-AcceptanceTests#Click
Also you can try this:
$I->click(['name' => 'category']);
I am new to woocommerce.I have a problem in product listing,when I add the shortcode It shows woocommerce html,class listing,But I want to display my html,css I tried but it is not not working ,Here is woocommerce code..
<ul class="products">
<li class="post-22 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-featured instock">
<a href="http://localhost/wordpress/?product=mac-2">
<img src="http://localhost/wordpress/wp-content/uploads/2015/02/2-240x300-240x300.jpg" class="attachment-shop_catalog wp-post-image" alt="2-240x300" height="300" width="240">
<h3>Mac 2</h3>
<span class="price"><span class="amount">£50.00</span></span>
</a>
Add to cart
</li>
Here is my code ..
<div class="box-product product-carousel" id="featured-tab-carousel">
<div class="slider-item">
<div>
<div class="product-block" id="element_change">
<div class="product-block-inner">
<div class="product-image-block">
<?php echo do_shortcode('[product_category category="featured" per_page="12" columns="4" orderby="default" order="ASC"]');?>
<div class="product-hover-block">
<div class="add-to-link">
<div class="cart">
<input type="button" value="Add to Cart" onclick="addToCart('43');" class="button" />
<em>Add to Cart</em>
</div>
<div class="wishlist"><a onclick="addToWishList('43');">Add to Wish List</a>
<em>Add to Wish List</em>
</div>
<div class="compare"><a onclick="addToCompare('43');">Add to Compare</a>
<em>Add to Compare</em>
</div>
</div>
<div class="rating"><img src="<?php echo get_template_directory_uri();?>/catalog/view/theme/OPC080180/<?php echo get_template_directory_uri();?>/image/stars-0.png" alt="Based on 0 reviews." /></div> </div>
</div>
<div class="product_category_title"> - Software</div>
<div class="name">MacBook</div>
<div class="product_info">
<div class="price">$589.50 </div>
</div></div></div>
Please help me how to change css...
This is said to work as a way to include a custom CSS Stylesheet for Woocommerce:
function enqueue_style_after_wc() {
$deps = class_exists( 'WooCommerce' ) ? array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general' ) : array();
wp_enqueue_style( 'my-style', 'my-style.css', $deps, '1.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_style_after_wc' );
Source: https://wordpress.stackexchange.com/questions/135171/woocommerce-include-custom-stylesheet-after-woocommerce-styling