Develop Reference

How to create a new div for a custom tag in Blogger?

I have a site on Blogger. I share book quotes on this site. At the same time, as of today, I started to share poems. The section below shows all my posts:
I want to create a separate area for poems and show the publications with the tag "Poetry" here. What should I do?

I imagine you are using WordPress to create your blog, in this case you need to create a loop by calling some variables that you want to display, such as number of posts, titles, thumbnail, etc.
Below I will leave a snippet of my website code and a print of how it is displayed on the front-end
<div>
<?php query_posts( array( 'post_type'=> 'noticias', 'posts_per_page' => 1, 'orderby' => 'title', 'order' => 'ASC' ) ); ?>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" style="text-decoration: none; color: #303030;">
<?php the_post_thumbnail('medium', array('class' => 'indicacao')); ?>
<div>
<h5><?php the_title(); ?></h5>
</div>
</a>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
I suggest you take a look at the WordPress documentation and the forum, where you can get more information about it.
If not WordPress, please provide more information about your code.

WprdPress Custom Post Type - how to display data on Popup or Sidebar

I have a custom post type called "team-member" which is in relationship (using ACF) with another custom post type called "speciality".
I have wrote the code to display team member on the page, team member name and speciality and all works perfect.
All the team members have also own description, so I would like to display the team member title, description and speciality within the Popup.
This is the code I have so far:
$relatedTeamMembers = new WP_Query(array(
'posts_per_page' => -1,
'post_type' => 'team-member',
'orderby' => 'title',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'related_team_group',
'compare' => 'LIKE',
'value' => '130'
)
)
));
if ($relatedTeamMembers->have_posts()) {
echo '<div class="team-members wrapper wrapper--larger">';
echo '<h2>OUR DENTISTS</h2>';
echo '<div class="team-members__wrapper">';
while($relatedTeamMembers->have_posts()) {
$relatedTeamMembers->the_post(); ?>
<div class="team-member">
<a href="<?php the_permalink(); ?>" target="_blank">
<img class="team-member__image" src="<?php
if (has_post_thumbnail()) {
the_post_thumbnail_url('teamMemberPortrait');
} else {
echo get_theme_file_uri('img/placeholder.png');
} ?> ">
</a>
<div class="team-member__label-gold">
<div class="team-member__label-gold__name"><?php the_title(); ?></div>
<div class="white-underline-strip-h-thin"></div>
<div class="team-member__label-gold__speciality"><?php
$specialities = get_field('related_speciality');
foreach($specialities as $specialities);
echo $specialities->post_title; ?>
</div>
</div>
</div>
<?php }
echo '</div>';
echo '</div>';
}
wp_reset_postdata();
So looking at this pice <a href="<?php the_permalink(); ?>" target="_blank"> the target attribute behaves similarly, when the team member card is clicked it loads the data in the new window, I would like the same behaviour but instead the data need to be loaded within the popup.
My popup is done in JS and is using injectHTML() function as below:
injectHTML() {
document.body.insertAdjacentHTML('beforeend', `
<div>Team Member Details</div>
`)
}
But it I have no idea how to connect click event on the card member with the team member content.
I would be super grateful for a hint or correct way to achieve this type functionality?

bind() can pass event when call injectHTML(). Then in injectHTML(), the member info can pass.
As primary these can be use:
Add EventListener() with as, document.querySelector("a").addEventListener('click',injectHTML.bind(event));
Then, parse the required information by event.

Using infinite scroll plugin on wordpress without "next navigation" functions

I've developed this page. There is many offers to load on main page, so i'm trying to make a "infinite scroll" function. To develop the page, i first made it on a bootstrap template, and after i turned into a page model template, on my real estate theme.
The problem is: All the "infinite scroll plugins" i've downloaded request 4 fields: Navigation selector, Next selector, Item selector and Content selector, as you can see here. The problem is that i only can provide two of this four fields: Item selector #seletor and content selector (.portfolio.items2). Here is the code that loops all the info:
<div id="seletor">
<div class="portfolio-items2">
<?php $newsArgs =
array(
'post_type' => 'property',
'posts_per_page' => 200,
"orderby" => 'meta_value_num',
"meta_key" => 'numerooff',
"order" => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'property-status',
'field' => 'slug',
'terms' => 'oneoff')));
$newsLoop = new WP_Query( $newsArgs );
while ( $newsLoop->have_posts() ) : $newsLoop->the_post(); ?>
<div class="col-md-4 shortcode-col listing_wrapper <?php meta('seletoroff');?>" >
<div class="property_listing" data-link="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<div class="listing-unit-img-wrapper">
<div class="property_media"></div>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<img width="525" height="350" src="<?php meta('imagemoff');?>" class="lazyload img-responsive wp-post-image" alt="" sizes="(max-width: 525px) 100vw, 525px" />
</a>
<div class="tag-wrapper">
<div class="featured_div"><?php meta('porcentooff');?></div>
</div>
</div>
<h4>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<?php meta('titulooff');?>
</a>
</h4>
<div class="property_location_image">
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>" rel="tag">
<span style="font-size: 15px;"><?php meta('bairrooff');?></span>
</a>
</div>
<br>
<div class="property_listing_details">
<?php $post_meta_data = get_post_custom($post->ID);
if( !empty($post_meta_data['REAL_HOMES_property_size'][0]) ) {
$prop_size = $post_meta_data['REAL_HOMES_property_size'][0];
echo '<div class="inforoom">'. $prop_size .'m² <div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-size.png" style="max-width: 14%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bedrooms'][0]) ) {
$prop_bedrooms = floatval($post_meta_data['REAL_HOMES_property_bedrooms'][0]);
$bedrooms_label = ($prop_bedrooms > 1)? __('Bedrooms','framework' ): __('Bedroom','framework');
echo '<div class="infobath">'. $prop_bedrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bed.png" style="max-width: 17%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bathrooms'][0]) ) {
$prop_bathrooms = floatval($post_meta_data['REAL_HOMES_property_bathrooms'][0]);
$bathrooms_label = ($prop_bathrooms > 1)?__('Bathrooms','framework' ): __('Bathroom','framework');
echo '<div class="infosize">'. $prop_bathrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bath.png" style="max-width: 17%; height: auto;">
</div></div>';
} ?>
</div>
<div class="listing_unit_price_wrapper">
<span class="price_label price_label_before" style="text-decoration: line-through;">De: R$ <?php meta('valordeoff');?></span><br>
<span style="text-decoration: underline; font-size: 22px; font-weight: bold;">Por: R$ <?php meta('valoroff');?> </span>
<span class="price_label"></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I can limit how many pages appear with posts_per_page, but i don't have any pagination configured (example: Navigation through pages, next page, older page...)
So, i see two ways to solve it, but in both i need your guide.
First: There is a way to solve it without navigation functions configured.
Second: The only way to solve it is to configure the navigation on my page wordpress template.
I'm really stuck here. Waiting for your help, thanks!

Wordpress AJAX Load More Button

I just found this script https://github.com/tokmak/wp-load-more-ajax and I wanted to add it into my template.. All good, I added the script from functions.php into my template functions.php, copied the js file in my template folder and added that line from your_template.php into my template page where my posts are shown, the button appear but it doesnt work..
I have every file loaded, I checked but still it does nothing..
<?php if (have_posts()) : while ( have_posts() ) : the_post(); ?>
<div class="post-box">
<div style="float:left; margin-bottom: 10px; padding-right:20px;"> <?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail($post->ID); } else { echo my_post_thumbnail_html(); } ?> </div>
<div class="post-title"> <?php the_title(); ?> </div>
<div class="post-content"> <?php excerpt(10); ?> </div>
<br clear="all" />
</div>
<?php endwhile; ?>
<a class="load_more" data-nonce="<?php echo wp_create_nonce('load_posts') ?>" href="javascript:;">Load more</a>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; wp_reset_query(); ?>
This is my code.. I dont know what to do..

You must have a loaded content template.
Once, you create a template and add new page with this template. Your page link example: http://localhost.dev/?page_id=1453
This template containt only post loop. You can develop this template with $_GET params(numberposts, category etc.)
function loadMore(e, numberposts) {
$('.show-more', e).text('Loading...');
$('<div>').load('<?php echo get_bloginfo('template_url'); ?>/get_loop_template.php?s=' + numberposts, function(r) {
$('.list-articles .btn-getmore').remove();
$('.list-articles').append(r);
});
}
This function get your posts, remove current "getmore-buton" than insert posts and add new "getmore-buton".

Bring a WordPress post dynamically

I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>

You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)