I'm not quite sure how to go about styling this particular bit of php:
<div id="twitter-feed">
<span style="font-weight:bold;">#frshstudio</span>
<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=frshstudio');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div><!-- end twitter-feed -->
Ideally, I'd like to replace the 'FRSHStudio' before each tweet with a bullet point. Also, maybe some padding between each tweet so the feed isn't as cluttered.
Live site.
Any and all help is greatly appreciated.
To remove the FRSHStudio in each item, you could use this code :
<?php echo str_replace('FRSHStudio: ', '', $item->get_title()); ?>
Then, in css, to add bullets and some padding on each item of the list, use this :
#twitter-feed ul li {
list-style: disc;
padding-bottom: 4px;
padding-left: 10px
}
Related
Sorry, I'm just a complete novice in PHP
Background: This code is a loop of three slider as you can see here - http://rashelectrical.com.au/. I need to make the H1 tag only on the first slide and make the other two H2 tag
Question:
How can I make the 2nd and last loop to H2 and H1 only on the first
loop?
Thanks
Here is my code:
https://jsfiddle.net/4jm5vhbf/
<?php while(have_rows('banner_slider')) : the_row();?>
<div class="sl" >
<div class="header-content relative-block align-center text-center flex-container align-middle" style="background:url('<?php the_sub_field('image');?>') no-repeat">
<div class="row">
<div class="columns">
<div class="header-content-inner relative-block animate-children">
<h3><?php the_sub_field('subheading');?></h3>
<h1><?php the_sub_field('heading');?></h1>
<p><?php the_sub_field('description');?></p>
<div class="button-group align-center">
<?php $n = 1; while(have_rows('button_links')) : the_row();
$link_lr = get_sub_field('link');?>
<?php if($n == 2){
$n2 = 'hollow';
}else{
$n2 = '';
}?>
<a class="button <?php echo $n2; ?>" href="<?php echo $link_lr['url']; ?>"><span><?php echo $link_lr['title']; ?></span></a>
<?php $n++; endwhile;?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;?>
Its kinda hard to tell without seeing the full code, maybe something like that?
<!-- Instead of H3 tag here, use P tag with css class and change the font size with css -->
<h3><?php the_sub_field('subheading'); ?></h3>
<!-- count the heading elements -->
<?php $headings = count( get_sub_field( 'heading' ) ); ?>
<!-- Condition here if heading 1 echo H1 else echo H2 -->
<?php echo ($headings == 0) ? '<h1>' . the_sub_field('heading') . '</h1>' : '<h2>' . the_sub_field('heading') . '</h2>' ?>
<p><?php the_sub_field('description'); ?></p>
<!-- Your rest of code -->
Also for SEO and accessibility reasons, your HTML markup should considering the "Semantic" of your Heading tags .. so don't use H3 tag before H1 tag.
I have a Wordpress function that checks if a user has filled in some fields on his or her profile. If it is filled in, echo its contents, if not: don't. Here is a stripped down version of the fun
<ul>
<?php if (get_the_author_meta('url',$theID)) : ?>
<li class="url">
Website
</li>
<?php endif; // End check for url ?>
<?php if ( get_the_author_meta('twitter',$theID)) : ?>
<li class="twitter">
Twitter
</li>
<?php endif; // End check for twitter ?>
<?php if ( get_the_author_meta('instagram',$theID)) : ?>
<li class="instagram">
Instagram
</li>
<?php endif; // End check for instagram ?>
<?php if ( get_the_author_meta('linkedin',$theID)) : ?>
<li class="linkedin">
LinkedIn
</li>
<?php endif; // End check for linkedin ?>
</ul>
This works well. However, for layout purposes I am using inline on these elements and I can't use floats. As you may know, this causes "gaps" in between the elements because they are all echoed on new lines.
I don't want these gaps. I know I can solve it by an arbitrary negative margin, but I don't want to use it because I am using a responsive, percentage based layout. The solution would be to "fill the gaps" in HTML by glueing all HTML together without new lines. As an example:
Will create gaps when displayed inline:
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
Won't have gaps:
<ul>
<li>Twitter</li><li>Instagram</li><li>LinkedIn</li>
</ul>
I am looking for a PHP solution (no CSS) that can get rid of all the new lines inside the ul, but I don't know where to start. Or, more precisely, I don't know where to put the function that removes the new lines. How can I wrap all that HTML, and then replace the new lines by ... nothing?
Have you tried something like:
$string = str_replace("\n", "", $string);
or:
$string = str_replace("\n\r", "", $string);
(where $string is the html you want to get on one line)
<ul class="author-meta">
<?php
if (get_the_author_meta('url', $theID)) {
$output = '<li class="url">Website</li>';
}
if ( get_the_author_meta('twitter', $theID)) {
$output .= '<li class="twitter">Twitter</li>';
}
if ( get_the_author_meta('instagram', $theID)) {
$output .= '<li class="instagram">Instagram</li>';
}
if ( get_the_author_meta('linkedin', $theID)) {
$output .= '<li class="linkedin">LinkedIn</li>';
}
echo $output;
?>
</ul>
Edit by Bram Vanroy: make sure to use get_the_author_meta instead of the_author_meta when using the function in PHP.
You can do something like this:
ob_start();
//echo whatever stuff you need
echo str_replace(PHP_EOL, NULL, ob_get_clean());
Using PHP_EOL instead of \n or \r\n will catch line breaks regardless of platform.
You can use buffer for that :
<?php
function remove_white_spaces($buffer){
return trim(preg_replace('/\s\s+/', ' ', $buffer));
}
ob_start('remove_white_spaces');
?>
<ul>
<?php if (get_the_author_meta('url',$theID)) : ?>
<li class="url">
Website
</li>
<?php endif; // End check for url ?>
<?php if ( get_the_author_meta('twitter',$theID)) : ?>
<li class="twitter">
Twitter
</li>
<?php endif; // End check for twitter ?>
<?php if ( get_the_author_meta('instagram',$theID)) : ?>
<li class="instagram">
Instagram
</li>
<?php endif; // End check for instagram ?>
<?php if ( get_the_author_meta('linkedin',$theID)) : ?>
<li class="linkedin">
LinkedIn
</li>
<?php endif; // End check for linkedin ?>
</ul>
<?php ob_end_flush(); ?>
Catch all the output on a buffer, run a function to replace new lines with blanks, and release the buffer.
Just set your ul font-size to 0 and apply the size to your li
font-size: 15px; display: inline-block;
As per comment by #APAD1 and feedback by #CBRoe, I decided to go with the comment method. It works flawlessly, though the HTML output isn't pretty (empty comments, byebye semantics).
<ul class="author-meta">
<?php if (get_the_author_meta('url',$theID)) : ?><li class="url">
Website
</li><?php endif; // End check for url ?><!--
--><?php if ( get_the_author_meta('twitter',$theID)) : ?><li class="twitter">
Twitter
</li><?php endif; // End check for twitter ?><!--
--><?php if ( get_the_author_meta('instagram',$theID)) : ?><li class="instagram">
Instagram
</li><?php endif; // End check for instagram ?><!--
--><?php if ( get_the_author_meta('linkedin',$theID)) : ?><li class="linkedin">
LinkedIn
</li><?php endif; // End check for linkedin ?>
</ul>
Note that the comments should be outside the if clauses, because if they are inside they might not be echoed corretly, e.g. missing a opening or closing tag.
Here you go:
<ul><?php
$output = '';
if (get_the_author_meta('url', $theID)) {
$output .= '<li class="url">Website</li>';
} elseif (get_the_author_meta('twitter', $theID)) {
$output .= '<li class="twitter">Twitter</li>';
} elseif (get_the_author_meta('instagram', $theID)) {
$output .= '<li class="instagram">Instagram</li>';
} elseif (get_the_author_meta('linkedin',$theID)) {
$output .= '<li class="linkedin">LinkedIn</li>';
}
echo $output;
?></ul>
To make an easy to use version, you can store all your websites data in an array:
$site=Array(
"url"=>"Website",
"twitter"=> "Twitter",
"instagram"=> "Instagram",
"linkedin"=>"LinkedIn"
);
And then generating the whole list. I used a simple sample case where all domains are .com. You will have to improve the array format if you want more information to be stored.
<ul><?php
foreach($site as $k=>$v)
if (get_the_author_meta($k,$theID))
echo '<li class="'.$k.'"><a href="'
.(($k=="url")?"":"http://$k.com/")
.the_author_meta($k,$theID).'">'.$v.'</a></li>';
?></ul>
Don't forget to remove your empty title attribute in your a tags.
Note that there are others CSS alternatives: using display:table on your ul and display:table-cell on your li, or using display: flex and so on.
I need to show 3 images in each row in <ul> tag. I have multiple <ul> tags and in each <ul> tag, I am showing 6 images. Now i have to show 3 <li> in first row and next 3 <li> in second row. Then same for next <ul>. I need to break row after 3 <li>. This is my code :
<div class="sets">
<?php foreach ($sets as $set => $items) : ?>
<ul class="set test-set">
<?php $i=0; foreach ($items as $thumb) : ?>
<?php
/* Prepare Image */
$content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';
?>
<?php if($i === 0):
echo '<li><div>'; ?>
<?php endif; ?>
<?php echo $content; ?>
<?php if($i === 2): $i = 0; ?>
<?php else: $i++; endif; ?>
</div></li>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</div>
http://jsfiddle.net/z4Q48/
li{
float: left;
}
li:nth-child(3n+4){
clear: both;
}
see http://css-tricks.com/how-nth-child-works/
Im currently struggle with sorting a foreach loop into its own div's and ul's, heres what i have currently:
<ul class="thumbnails parts-page">
<?php $show = false; ?>
<?php foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
basically this produces:
<ul class="thumbnails parts-page">
<li class="span4">
<a href="http://www.canecreek.com/" style="background: url('/torqzone/images/brands/cane-creek.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<li class="span4">
<a href="http://www.amclassic.com/en/" style="background: url('/torqzone/images/brands/american-classic.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<li class="span4">
<a href="http://www.avid.com/US/" style="background: url('/torqzone/images/brands/avid.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
</ul>
but i need to split it so that every 9 items is in its own:
<ul class="thumbnails parts-page">
9ITEMS
</ul>
I have tried various solution that i found online but nothing seems to work..
Any Help Greatly Appreciated.
A very easy and readable solution is to use array_chunk:
<?php foreach (array_chunk($this->items, 9) as $items): ?>
<ul>
<?php foreach ($items as $item): ?>
<!-- your code -->
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
Yes it's an extra loop, but so much more readable.
Use something like this:
echo '<ul ...>';
$i = 0;
foreach ( ...... ) {
if (++$i % 9 == 0) echo '</ul><ul ....>';
// your code here
}
echo '</ul>';
Set a variable equal to 1. increment it every time you run your loop. If its > 9, create a new ul, else add it to the old ul.
<?php
$i=0;
foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
++$i;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php if($i>8): $i=0; ?>
</ul><ul class="thumbnails parts-page">
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
instead of above code replace this
How about using a counter variable?
$counter = 0;
<?php $show = false; ?>
<?php foreach ($this->items as $item) : ?>
<?php if ($counter % 9 == 0)
echo '<ul class="thumbnails parts-page">';?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php endif; ?>
<?php if ($counter % 9 == 0)
echo '</ul>';?>
<?php $counter +=1 ?>
<?php endforeach; ?>
In this way you will print the ul tags every 9 items of your list (putting them inside).
(PLease test the code since I do not have a environment for it right now)
The easiest way for you to accomplish this is to create a counter that goes up by one every time. For example at the start of your code declare $count and the in your for each statement say $count++. You can then create a IF statement that says if the count is 9, create the new UL.
Seems like people are trying to make this too complicated.
From your what I understand is you want is every unordered list must contain only 9 items.. If thats the case you can use a count variable
<?php $show = false; $count=0; ?>
<?php foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<?php if($count%9==0) echo'<ul class="thumbnails parts-page">'; ?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php if($count%9 ==0) echo '</ul>'; ?>
<?php $count++; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
I am using codeingiter and have soms results that i am showing from a database. The results are shown using PHP as follows:
<?php
if(isset($foo)){
foreach($foo as $bar){ ?>
<ol><li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li></ol>
<?php
}
}
?>
I've also tried adding the class 'results' to the ol li.results and no luck. Have added a border and the border wraps around each result so i know my tags are in the right place.
CSS:
ol li {
border:1px solid red;
list-style-type: decimal;
}
In the reset.css i had this:
loads...of...elements including ul, ol and li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I removed the ol, li from this and i got the numbers working but all have 1. for each result rather than 1, 2 3
These are shown as a list of addresses and i would like to have them numbered so the first one would have 1.RESULT 1, 2.RESULT 2 and so on... I've tried to use the ordered list tag and nothing seems to show up regarding numbers. i have checked in firebug and the tag is firing out for each one. Is this a css issue or the way PHP is showing the results?
Any help would be much appreciated.
You forgot the <li> tags inside the <ol> tag
<?php
if(isset($foo)){
echo '<ol>';
foreach($foo as $bar){ ?>
<li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li>
<?php
}
echo '</ol>';
}
?>
Try the following
<?php if(isset($foo)): ?>
<ol>
<?php foreach($foo as $bar): ?>
<li class='results'>
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
<li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
It's a CSS issue if the numbers are not showing. Common issue with reset stylesheets. Try adding:
list-style-type: decimal;
to your list style.
If I got it right, your <OL> and </OL> tags should stay outside the for cicle, while you should wrap your output between <LI> and </LI> inside the cicle.
Also, it's not a good practice to put DIVs inside LI elements, avoid it if you can by changing your styles.