Experiencing tags on screen - css

I am calling title, body and few other things from database and using echo to display it on screen. Everything is working fine except body, where p tags are printed at start and end of body. My code is
echo "<div class='db'>
<h2 style='background-color:#ffffff;color:#000000;'>".$row['title']."</h2>
<p style='background-color:#ffffff'>" .
(strlen($row['body'])>500?
substr( $row['body'],0,500)."...<a href='blog.php?blogId=" . $row['blogs_id'] . "' style='font-size:13px;color:black;background-color:#ffffff;text-decoration:none;'>Read more</a>":
$row['body']).
"</p>
<img src='$profilephoto_info' height='60' style='background-color:#ffffff;border-radius:20px;'>
By:<a href='$posted_by' style='background-color:#ffffff;text-decoration:none;color:#626769;font-size:13px;'>$posted_by</a>
<p style='background-color:#ffffff;text-decoration:none;color:#626769;font-size:13px;''>".$row['bio']."</p>
</div>";
No h2 tags appear for title nor for any other elements only body is showing p tags around it on screen.

Format your code to know where things get missed up
consider heredoc
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc
also loss the inline styles!
<?php
$title = $row['title'];
$shortBody = strlen($row['body']) >500 ? substr( $row['body'],0,500) : $row['body'];
$url = "blog.php?blogId=" . $row[' blogs_id '];
$bio = $row['bio '];
echo <<<dbElement
<div class='db'>
<h2 style='background-color:#FFF;color:#000;'>
$title
</h2>
<p style='background-color:#FFF'>
$shortBody ...
<a href="$url"
style="font-size:13px;color:black;background-color:#FFF;text-decoration:none;">
Read more
</a>
</p>
<img src='$profilephoto_info' height='60'
style='background-color:#FFF;border-radius:20px;'>
By:
<a href='$posted_by'
style='background-color:#FFF;text-decoration:none;color:#626769;font-size:13px;'>
$posted_by
</a>
<p
style='background-color:#FFF;text-decoration:none;color:#626769;font-size:13px;'>
$bio
</p>
</div>
dbElement;
?>
*make sure to not include my php opening and closing tags (<?php and ?>)

Related

customizing image src of each post in a WordPress loop

So I have a WP_Query looping through my custom post types and I'm looking to customize the src of my image tags based on which post in the loop it is. What is the cleanest way to achieve this.
consider this as what my loop is spitting out on each iteration:
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php bloginfo('template_url')?>/images/icons/trainingAndDevelopment.svg">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
Why you don't use post thumbnail?
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
EDIT:
Then you need to allow upload SVG.
But BE WARNING: Allow upload SVG is not good for security
(take a look: https://secupress.me/blog/add-svg-support-in-wordpress-medias-yes-but-no/)
So DO NOT USE THE FOLLOWING CODE, which one can see everywhere.
function custom_mtypes( $m ){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' )
FIRST SOLUTION
I don't know how to clean SVG on upload, luckily a plugin that does all that exists. This plugin also fixes some others issues with svg.
https://wordpress.org/plugins/scalable-vector-graphics-svg/
SECOND SOLUTION
If only admin need to upload svg
You can use following code:
function custom_mtypes( $m ){
if(get_current_user_id()==1){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
}
add_filter( 'upload_mimes', 'custom_mtypes' );
If you speak French here is an interesting discussion on this subject
https://wpchannel.com/autoriser-envoi-fichiers-svg-wordpress/ (read comments, DON'T USE THE CODE on the top of this article)

Get post title from ACF - select post

I have beginner with ACF and WordPress as developer.
So, I want to select which title post has to be displayed in div from WordPress panel. I have got some ACF file called "hot_news" which is post object. Returned content is post object, not ID.
I have got also "Show if post is equal to (some post title)".
This is my code:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php the_field('hot_news'); ?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
When I make it is displayed, but does not display post title. What is wrong?
to retrieve a field from ACF you should use get_field so
<?php echo get_field('hot_news'); ?>
prints the current post custom field named "hot_news".
If you want you can specify a post ID :
<?php echo get_field('hot_news'[,post_ID]); ?>
You said in your question that hot_news is a post object. Therefore, if you try to echo an object, you're not going to get what you want.
Instead, you'll have to do something like:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php
$hotnews = get_field('hot_news');
if($hotnews) echo $hotnews->post_title;
?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
You can get more info on how to work with an ACF post object here: https://www.advancedcustomfields.com/resources/post-object/
My method should work if you just need the simple post title, but if you start needing permalinks to the post and stuff like that, it may make sense to use the setup_postdata($post) code that the ACF docs use.

How do I filter out certain results based on the value of a faceted Attribute with Algolia Search for Wordpress?

I'm trying to filter out some results in an Algolia faceted search within Wordpress. I want to show only certain results to a user logged in with a specific WP user role. Here is what I have in my results now and it's not returning any result, but the pagination for the search does show up, so I know the script is running without errors. I also do not have any console errors.
This is my current script from instantsearch.php:
<script type="text/html" id="tmpl-instantsearch-hit">
<article itemtype="http://schema.org/Article">
<?php
// Get data
$post_title = '{{{ data._highlightResult.post_title.value }}}';
$aim_of_work = '{{{ data._snippetResult.aim_of_organisations_work.value }}}';
$organisation_region = '{{{ data._highlightResult.organisation_region.value }}}';
?>
<?php
// If user is limited to Americas and the Carribbean
if( in_array('americas', $user_info->roles) ) {
if($organisation_region == 'Americas and the Caribbean') { ?>
<!-- Print Americas Results -->
<div class="ais-hits--content">
<h3 itemprop="name headline"><?php echo $post_title; ?></h3>
<div class="ais-hits--tags">
<# for (var index in data.taxonomies.post_tag) { #>
<span class="ais-hits--tag">{{{ data._highlightResult.taxonomies.post_tag[index].value }}}</span>
<# } #>
</div>
<div class="excerpt">
<p>
<?php echo $aim_of_work; ?>...
</p>
<p class="text-small">Region: <?php echo $organisation_region; ?></p>
</div>
</div>
<div class="ais-clearfix"></div>
<?php } //END if
} else { ?>
<!-- Print All Results -->
<div class="ais-hits--content">
<h3 itemprop="name headline"><?php echo $post_title; ?></h3>
<div class="ais-hits--tags">
<# for (var index in data.taxonomies.post_tag) { #>
<span class="ais-hits--tag">{{{ data._highlightResult.taxonomies.post_tag[index].value }}}</span>
<# } #>
</div>
<div class="excerpt">
<p>
<?php echo $aim_of_work; ?>...
</p>
<p class="text-small">Region: <?php echo $organisation_region; ?></p>
</div>
</div>
<div class="ais-clearfix"></div>
<?php } // END if ?>
</article>
</script>
My concern is that my conditional is not working: if($organisation_region == 'Americas and the Caribbean')
I feel like there is a better way to do this, but I would take any way that works right now.
/**-- UPDATE --*/
Here is my facet widget:
/* Region refinement widget */
search.addWidget(
instantsearch.widgets.menu({
container: '#facet-org-region',
attributeName: 'organisation_region',
sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
limit: 10,
templates: {
header: '<h3 class="widgettitle">Region</h3>'
}
})
);
Your solution seems to mix JavaScript code with PHP.
PHP code gets parsed and executed on the server side and JavaScript on the client side in the browser.
In your example, $organisation_region will always equal the string '{{{ data._highlightResult.organisation_region.value }}}'.
You probably want to add organisation_region as a facet and then refine on that.
To achieve that, you can take a look how other facets are implemented here https://community.algolia.com/wordpress/customize-search-page.html
Also, here is how to register your custom facet: https://community.algolia.com/wordpress/indexing-settings.html#register-custom-facet

Is it correct to put h2 and h3 on top of image?

I have few banners which are main categories on the website. I wish to display
title and subtitle on top of those images, and currently I am using the following structure:
<a href="#" title="">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id(1) );?>" alt="xy">
<h3>
<?php $post_title = get_post_custom_values('post_title', 1);
echo $post_title[0];
?>
</h3>
<h2>
<?php $post_subtitle = get_post_custom_values('post_subtitle', 1);
echo $post_subtitle[0];
?>
</h2>
</a>
Is this a good workaround? Is this correct html usage?
Heading elements should not be used for subtitles. From the W3C:
h1–h6 elements must not be used to markup subheadings, subtitles,
alternative titles and taglines unless intended to be the heading for
a new section or subsection.

PHP Keeps Duplicating Table Elements in WordPress Theme

I'm working on this test site, which is a WordPress website (using version 5.5) and using the Canvas WooTheme. The front page of it is supposed to display today's calendar events, which are provided by the WordPress plugin, Events Manager.
What I would like for them to do is display, such as this events page (and the screenshot below - seen in this screenshot), does. Instead, the code below somehow has the rest of the template (including the sidebar) sucked into the table, continuing to duplicate table rows and columns into itself (as seen from this screenshot).
The code it shoots out into Firebug is the following:
<table cellspacing="0" cellpadding="0" id="current-events"><tbody><tr><td class="startdate_cost_td">
<span class="start_time"><table cellspacing="0" cellpadding="0" id="current-events"><tbody><tr>
<td class="startdate_cost_td">
<span class="start_time">12:00 AM</span><br>
<span class="cost">Free</span>
</td>
<td class="event_image"> <img src="../../../wp-includes/images/default_img.jpg"></td>
<td class="event_title">Sex Addicts Anonymous meeting<br>
<i><span class="location_name"># No location listed</span></i>
<div id="read_more_wrapper">
<img src="../../../wp-includes/images/little_pink_arrow.jpg"><a class="pink_link" href="http://testbuzz.illinimedia.com/events/sex-addicts-anonymous-meeting-90">READ MORE</a></div></td></tr>
<!--12:00 AM</span><br/><span class='cost'>Free</span></td><td class='event_image'><img src='../../../wp-includes/images/default_img.jpg' /></td><td class='event_title'>Sex Addicts Anonymous meeting<br/><i><span class='location_name'>#No location listed</span></i><br />Mind, body, & spirit<div id='read_more_wrapper'><img src='../../../wp-includes/images/little_pink_arrow.jpg' /><a href='http://testbuzz.illinimedia.com/events/sex-addicts-anonymous-meeting-90' class='pink_link'>READ MORE</a></td></tr></div><tr><td class='startdate_cost_td'>
<span class='start_time'>-->
<tr>
<td class="startdate_cost_td">
<span class="start_time">8:30 AM</span><br>
<span class="cost">Free</span>
</td>
<td class="event_image"><img alt=""Inside India" with Larry Kanfer" src="http://testbuzz.illinimedia.com/wp-content/uploads/locations-pics/event-35214.jpg"> </td>
<td class="event_title">“Inside India” with Larry Kanfer<br>
<i><span class="location_name"># Alice Campbell Alumni Center</span></i>
<div id="read_more_wrapper">
<img src="../../../wp-includes/images/little_pink_arrow.jpg"><a class="pink_link" href="http://testbuzz.illinimedia.com/events/inside-india-with-larry-kanfer-31">READ MORE</a></div></td></tr>
......more events similar to this......
<div class="fix"></div>
<div class="nav-entries">
<span class="nav-prev icon fl">Older posts</span> <div class="fix"></div>
</div>
<!-- /#main -->
<div id="sidebar">
<div class="widget widget_woo_search" id="woo_search-3"><div class="search_main">
<form action="http://testbuzz.illinimedia.com/" class="searchform" method="get">
<input type="text" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." name="s" class="field s">
<input type="image" name="submit" class="submit" alt="Search" src="http://testbuzz.illinimedia.com/wp-content/themes/canvas/images/ico-search.png">
</form>
<div class="fix"></div>
</div>
.... the rest of the content stuck .....
</span></td></tr></tbody></table>
Below is the code I stuck into our magazine template within our child theme, template-magazine.php, which is causing the problem:
<?php
$page = ( !empty($_REQUEST['page']) && is_numeric($_REQUEST['page']) )? $_REQUEST['page'] : 1;
$args = array(
'limit' => 10,
'scope' => 'today',
'pagination' => 1
);
if (isset($_REQUEST['c'])) {
$args['category'] = $_REQUEST['c'];
$args['scope'] = 'future';
}
$args['offset'] = $args['limit'] * ($page-1);
$events = em_get_events_array($args);
$size = sizeof($events)-1;
echo "<h2 id='headding'class='title'>Today's Events</h2>";
echo "<table cellpadding='0' cellspacing='0' id='current-events' >";
for ($i=0;$i<$size;$i++) {
echo "<tr><td class='startdate_cost_td'>
<span class='start_time'>" . $events[$i][0] .
"</span><br/><span class='cost'>" . $events[$i][7] .
"</span></td><td class='event_image'>";
if ($events[$i][8] == '') {
echo "<img src='../../../wp-includes/images/default_img.jpg' />";
}
else {
echo $events[$i][9];
}
echo "</td><td class='event_title'>" . $events[$i][10] .
"<br/><i><span class='location_name'>#". $events[$i][11] .
"</span></i><br />" .$events[$i][12] .
"<div id='read_more_wrapper'>" .
"<img src='../../../wp-includes/images/little_pink_arrow.jpg' /><a href='" . $events[$i][13] . "' class='pink_link'>READ MORE</a></td></tr>" .
"</div>";
}
echo "</table>";
$last_index = count($events) - 1;
echo $events[$last_index][0];
?>
I made sure the PHP code above was the cause of the main problems, by removing the code itself. That seems to do the trick! When I tried placing this code in different parts of the template-magazine.php file, it repeated the same results. When I also moved this to the functions.php file in our child theme, it simply made everything else go further down and expand to the whole width of the browser. How do I get rid of the looping in the code, having all of the side content being sucked into the table being created?
UPDATE: I commented out the above PHP code using HTML tags, duplicating the events and commenting out the table elements, which we would like to have show on the page. Below is the screenshot of what it looks like: https://docs.google.com/open?id=0B2UC67NQiW2yalhMSGxra0FFWGM and the code that's showing up in the picture below (I didn't want to paste in the code because it would've been very long:
It ended up being that it seemed to be reading in the Event Preview settings, which I created within the plugin. All I needed to do was simply create a for loop, reading in each of the events for that specific page, blocking out the rest of the PHP code above. The following is the code used to read in the events:
for ($i=0;$i<$size;$i++) {
echo $events[$i][0];
}
Hopefully this helps someone using the Events Manager plugin.

Resources