I'm very new to php and wordpress and need help. I'm trying to change my bootstrap responsive grid with php. >992px I should have 3 columns, >768px I should have only 2 columns and <767px I should have only one. How can I do this with php? Really appreciate the help.
Here's my code:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="cover-card">
<?php the_post_thumbnail('full', array('class' => 'image img-responsive')); ?>
<div class="overlay">
<div class="text">
<strong><?php the_title(); ?></strong>
<?php the_content(); ?>
Comprar
</div> <!-- /.text -->
</div> <!-- /.overlay -->
</div> <!-- /.cover-card -->
</div> <!-- /.col-md-4 -->
<?php if ( $i % 3 === 0 ) { echo '</div> <!-- /.row -->
<div class="row">'; } ?>
<!-- store item -->
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This is what happens with my loop on the sm resolution:
<div class="col-lg-4 col-md-6 col-sm-12"></div>
The grid system is based off the idea that there are 12 columns. In the documentation it will describe what width pertains to the xs, sm, md, and lg classes.
The above solution should work because it will place three cards per row if the display is greater than 992px, two if greater than 768px, and one if less.
Here's a little example
Here i am trying to convert my html and css template in wordpress theme and i have four php files (1) index.php, (2) header.php, (3) feature.php and (4) footer.php.
In index.php files i am getting the other three files using function <?php get_header(); ?>, <?php get_feature (); ?>,<?php get_footer (); ?>.
Now on using function <?php get_header(); ?>,<?php get_footer (); ?> in index.php it shows the header and footer section but on including <?php get_feature (); ?> between header and footer it shows error indicating <?php get_feature (); ?>line saying "Fatal error: Call to undefined function get_feature() in C:\xampp\htdocs\Alvin Lemo\wordpress\wp-content\themes\alvinlimo\index.php on line 2" and does not show the feature section and footer section.
Below is what i have done
In index.php
<?php get_header (); ?>
<?php get_feature(); ?> <!--- Error Showing Line -->
<?php get_footer (); ?>
In header.php
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Alvin Lemo</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<!-- Script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.png" >
<?php wp_head (); ?>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<h2 style="color:white">Please Login To Resere Your Fleet With Us</h2><br />
<form>
<div class="form-group">
<input class="form-control" id="email" style="width:50%;height:40px;color:black;border-radius:4px;font-size:18px" placeholder="Enter email"><br /><br />
</div>
<div class="form-group">
<input class="form-control" id="pwd" style="width:50%;height:40px;color:black;border-radius:4px;font-size:18px" placeholder="Enter password"><br /><br />
</div>
<div class="checkbox">
</div>
<button type="submit" class="btn btn-default">Rserve</button>
</form>
</div>
</div>
</div>
<div id="myNavv" class="overlay">
×
<div class="overlay-content">
<div class="container">
<h2 style="color:white">Please Register To Reserve Your Fleet </h2><br />
<form>
<div class="form-group">
<input class="form-control" id="email" style="width:50%;height:40px;color:black;border-radius:4px;font-size:18px" placeholder="Enter FullName"><br /><br />
</div>
<div class="form-group">
<input class="form-control" id="email" style="width:50%;height:40px;color:black;border-radius:4px;font-size:18px" placeholder="Enter email"><br /><br />
</div>
<div class="form-group">
<input class="form-control" id="pwd" style="width:50%;height:40px;color:black;border-radius:4px;font-size:18px" placeholder="Enter password"><br /><br />
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>
</div>
<!-- Header
================================================== -->
<header>
<div class="logo">
<a class="smoothscroll" href="#hero"><!--<img alt="" src="images/logo.png">-->
<h2>A.L.S</h2>
</a>
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#features">EVENT TRANSPORTATION</a></li>
<li><a class="smoothscroll" href="#pricing">Services</a></li>
<li><a class="smoothscroll" href="#screenshots">OUR FLEET</a></li>
<li><a class="smoothscroll" href="#testimonials">Testimonials</a></li>
<li><a class="smoothscroll" href="#subscribe">CONTACT</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<ul class="header-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</header>
<!-- Header End -->
<!-- Homepage Hero
================================================== -->
<section id="hero">
<div class="row">
<div class="twelve columns">
<div class="hero-text">
<br /><br /><br />
<h1 class="responsive-headline">Welcome To Alvin's Limo</h1>
<p>
Little about alivin's limo services.
</p>
</div>
<br />
<div class="buttons">
<a class="button trial" onclick="openNav()">Reserve Fleet</a>
<a class="button learn-more smoothscroll" onclick="openNavv()">Register</a>
</div>
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</section>
<!-- Homepage Hero end -->
In feature.php
<!-- Features Section
================================================== -->
<section id='features'>
<div class="row section-head">
<h1>EVENT TRANSPORTATION</h1>
<p>
We Fell Happy To Be Part Of Your Special Ocassion
</p>
</div>
<div class="row feature design">
<div class="six columns right">
<h3> Wedding Transporation</h3>
<p>LMake your "most memorable day" of your life more special by Alvin Wedding Limo Service.
Your weddings transportation will be most beautiful latest model limousine imaginable,
with all the special amenities you desire. Our chauffeurs are always on time, courteous,
and dressed in black suit. Let us take you to the church and from the church to the reception and
from the reception to the airport or any special place in Texas for your honeymoon. You don't need
to worry about coordinating transportation from each destination, we can help arrange your weddings
party pick-ups and drop-offs and everything in between. We do service all the hills country wedding
venues. Feel free to check our wedding reviews - WEDDINGWIRE-THE KNOTT.
</p>
</div>
<div class="six columns feature-media left">
<img src="images/fpt-112704-Wedding-Flowers.jpg" />
</div>
</div>
<div class="row feature responsive">
<div class="six columns left">
<h3>Wine Transportation.</h3>
<p>
Alvin Limousine Services share your passion for wine; that’s why we specialize in hills country
wine tours. We offer a diverse selection of vehicles ranging from sedans, stretch limousines to
transport you affordably in luxury, safety, and style! Leave the driving, directions, stress,
and traffic to us while our Chauffeur whisks you away to your perfect day!
Our impressive customer list is concrete evidence of our ability to outperform our competition,
consistently exceeding our customers’ expectations. We will make your tour the best tour you have
ever known. We have dedicated chauffeur that specialize in wine tours, Brewery and Vodka distillery.
</p>
</div>
<div class="six columns feature-media right">
<img src="images/wine-tours-preferrred-limo.jpg" />
</div>
</div>
<div class="row feature cross-browser">
<div class="six columns right">
<h3>Concert</h3>
<p>
Whether you want to see a Show, Concert, Opera, Symphony or any other fun thing you can think of,
Alvin Limos will provide you personal and reliable chauffeured Limousine.
Reserve luxury town car Sedan or our luxurious stretch limousine for hassle free ride
from navigation, traffic, and struggling the multitude of cars for parking. Roll up with
style to the front door of any events location you desire.
Let the professional Chauffeurs of Alvin Limousine Service take you to your next Concert,
Movie premier, Opera, Symphony or any night out events with comfort and style.
We get you there on time in safely and in style ; Alvin Limo will ensure you have the time of
your life. We are the Leader in providing a full Service Limousine Transportation.
</p>
</div>
<div class="six columns feature-media left">
<img src="images/thenextweb.jpg" />
<!--<img src="images/feature-image-3.png" alt="" />-->
</div>
</div>
<div class="row feature video">
<div class="six columns left">
<h3>ACL/SXSW/Austin 360</h3>
<p>
What you hear is true. With vibrant entertainment and culture, inspiring cuisine and stunning outdoor settings, Austin lets you create a soundtrack all your own. We're home to more than 250 music venues and a vibrant arts scene. So take a look around, and put Live Music Capital of the World® on your playlist. Whether you want to take ride thought Austin or plan a night out with friends and family we will do that in style. Alvin Limousine is a premier transportation when it comes to Austin Texas culture and events. Come one come all and let us drive though the ins and outs of this beautiful happening city.
Alvin Limousine staff are very discrete and confident with all our celebrities and movies stars that we have been transporting for years.
</p>
</div>
<div class="six columns feature-media right">
<img src="images/1ff7f709cd8ef280ec5f2b317f79ba14-2b32e6b5be7f48f4557299fc9db819c3.png" />
</div>
</div>
<div class="row feature cross-browser">
<div class="six columns right">
<h3>Convention Center</h3>
<p>
The Austin Convention Center, a premier facility located in the heart of the capital city’s downtown business district, has emerged as a leader in the convention and meeting industry.
Alvin’s Limousine Services is proud to be part of your success by providing you or your guests with a premier chauffeured services . We can accommodate small or large groups .
- Airport Transportations
- Shuttling your groups through out your meetings
- Advertising your business on our Cars. (Wrap the cars with your Logo or new Product.**Extra Fees apply)
</p>
</div>
<div class="six columns feature-media left">
<img src="images/ARATA_ISOZAKI_RHWL_QNCC_DOHA_QATAR_PAN_060313_0009.jpg" />
</div>
</div>
<div class="row feature responsive">
<div class="six columns left">
<h3>Circuits of America - Formula 1</h3>
<p>
Circuit Of The Americas is a multi-purpose facility that will host the most prestigious racing events in the world, including the Formula 1 United States Grand Prix. It is the first purpose-built Grand Prix facility in the U.S Austin Texas
Circuit of The Americas (COTA) in Austin, Texas, is the home of world championships and a world-class destination for premium sports and entertainment.
Alvin’s Limousine Services is proud to be the leading transportations in Austin Texas, we can provide you or your Guests with many VIP Packages that can suits your needs , from Town car service , SUV’s or Stretch Limousine ,we are your one stop solutions to your transportations for World-Class destination . For International reservations , Please use our 24/7 reservations systems for quick quote and complete reservation confirmed within one hour or you can
Skpe us at : Austinlimo
</p>
</div>
<div class="six columns feature-media right">
<img src="images/bQwIzE.jpg" />
</div>
</div>
<div class="row feature cross-browser">
<div class="six columns right">
<h3>Prom</h3>
<p>
Whether you want to see a Show, Concert, Opera, Symphony or any other fun thing you can think of, Alvin Limos will provide you personal and reliable chauffeured Limousine. Reserve luxury town car Sedan or our luxurious stretch limousine for hassle free ride from navigation, traffic, and struggling the multitude of cars for parking. Roll up with style to the front door of any events location you desire.
Let the professional Chauffeurs of Alvin Limousine Service take you to your next Concert, Movie premier, Opera, Symphony or any night out events with comfort and style.
We get you there on time in safely and in style ; Alvin Limo will ensure you have the time of your life. We are the Leader in providing a full Service Limousine Transportation.
</p>
</div>
<div class="six columns feature-media left">
<img src="images/prom-header.jpg" />
</div>
</div>
</section>
<!-- Features Section end -->
In footer.php
<!-- Footer
================================================== -->
<footer>
<div class="row">
<div class="six columns right-cols">
<div class="row">
<div class="columns">
<h2 class="address">Come Visit</h2>
<p>
7901 Cameron Rd Bldg3 Suite 312, Austin tx 78754<br>
</p>
</div>
<div class="columns last">
<h2 class="contact">Contact Us</h2>
<ul>
<li>512 300 1379</li>
<li>someone#woosite.com</li>
</ul>
</div>
</div>
</div>
<p class="copyright">© 2014 Alvin's Limousine Services | Design by <a>cts-Design Team</a></p>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#hero"><i class="icon-up-open"></i></a>
</div>
</div> <!-- Row End -->
</footer>
<!-- Footer End-->
<?php wp_footer (); ?>
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2 /jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js">
</script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/imagelightbox.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js">
</script>
</body>
</html>
Functions like get_header() and get_footer() are predefined WordPress functions. To get custom part of template we use
<?php get_template_part( string $slug, string $name = null ) ?>
As stated in documentation, patterns it uses to find files are:
{slug}.php
{slug}-{name}.php
If the theme contains no specified file then no template will be included.
The template is included using require, not require_once, so you may include the same template part multiple times.
Finally, this one should load your feature template:
<?php get_template_part( 'feature' ) ?>
Source: https://developer.wordpress.org/reference/functions/get_template_part/
You try to use an undefined function, that is maybe coming from a third party plugin. get_feature() is not a native WordPress function.
If you want to display the featured image, you can use get_the_post_thumbnail() (more details
Hope it helps
I recently inherited a website with a horrible file structure. I need to update some content (text) but I can’t find where it is being defined. The database table does not have the information, so I'm guessing the text is being defined elsewhere. Is there a tool or "trick" in Chrome Dev Tools to find the content source? Your help is much appreciated!
***Snippet from PHP File:
<div id="product_wrapper" class="add-bottom30">
<div class="columns sixteen">
<div class="columns twelve add-bottom60 catalogue">
<!-- Pager -->
<?php include('sql-' . $_SESSION['lang'] . '/promos.php');?>
</div>
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<?php echo flyer_jet_2016; (where the text I need to change lives) ?>
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
</div>
*** Snippet from source code ("View Source" in Chrome):
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<span class="icon" data-icon="(" style="color:#fff;margin-bottom:15px;"></span><br>Tool Storage<br>Solutions 2016
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
I've notice something strange in one of my page.
The fonts in the page is getting very blur after google maps is loaded.
The page:
http://aranrd.wpengine.com/contact/
You can see that at the moment google maps is loaded, the fonts inside it's section, inside the grey area, getting blur.
This is a page template I've build for the contact page.
<?php get_header(); ?>
<div class="container">
<div id="contact-page">
<h1><?php _e( 'CONTACT', 'aran-rd' ); ?></h1>
<div id="primary" class="content-area contact-inner">
<div class="row top-row">
<div class="col-sm-6">
<?php echo do_shortcode('[gravityform id=2 title=false description=false ajax=false]'); ?>
</div>
<div class="col-sm-6">
<!-- google maps iframe -->
<iframe src="https://www.google.com/maps/d/u/1/embed?mid=zWesdBo33x1E.kHaxSgqiUyNY" width="640" height="280"></iframe>
<div class="row inner-row">
<div class="col-sm-6">
<div class="location-details">
<?php _e( '43 Haeshel Street,<br/>Caesarea Buisness Park<br/>P.O.B 3067', 'aran-rd'); ?>
</div>
</div>
<div class="col-sm-6">
<div class="contact-details">
<?php _e( 'Tel: 972-4-623-9000,<br/>Fax: 972-4-627-3260<br/>E-mail: info#aran-rd.com', 'aran-rd'); ?>
</div>
</div>
</div><!--.inner-row-->
</div>
</div>
</div><!--#primary-->
</div><!--#contact-page-->
</div><!--.container-->
<?php get_footer(); ?>
Anyone knows what's going on?
Removing the margin-bottom from top-row solve the problem, no idea why.
I am new to php and I want to only show specific footer content on 2 pages.
I know I would use an if statement, but I don't know if there is way in php to know what page is being displayed.
Here is the footer.php
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* #package WordPress
* #subpackage Twenty_Eleven
* #since Twenty Eleven 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" role="contentinfo">
<?php
/* A sidebar in the footer? Yep. You can can customize
* your footer with three columns of widgets.
*/
get_sidebar( 'footer' );
?>
<div class="boli-better">
<h1 class="description-title">WHY IS BOLI BETTER?</h1>
<div class="feature feature-item-248"><img class="main" src="http://www.btylus.com/wp-content/uploads/uclaproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.
</div>
</div>
</div>
<div class="feature feature-item-252"><img class="main" src="http://www.bylus.com/wp-content/uploads/bolitip.png" alt="" width="640" height="301" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PEN-LIKE PRECISION</h2>
</div>
<div class="feature_description_content">
Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.
</div>
</div>
</div>
<div class="feature feature-item-254">
<img class="main" src="http://www.bylus.com/wp-content/uploads/blueproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">BALL POINT</h2>
</div>
<div class="feature_description_content">
Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.
</div>
</div>
</div>
<div class="feature feature-item-256">
<img class="main" src="http://www.btylus.com/wp-content/uploads/greenproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">HEAVY METAL</h2>
</div>
<div class="feature_description_content">
Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.
</div>
</div>
</div>
</div>
<div id="site-generator">
<strong id="footertext">Copyright Boli Stylus 2011</strong>
Contact Us
Terms
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Ok, so this is what I came up with, but when I add this code to the footer.php, the entire footer doesn't appear on the site.
I'm sure I just made an elementary mistake so thanks for the help in advance!
<?php
$page = 'shop';
if (is_page($page)) { ?>
<div class="boli-better">
<h1 class="description-title">WHY IS BOLI BETTER?</h1>
<div class="feature feature-item-248"><img class="main" src="http://www.bylus.com/wp-content/uploads/uclaproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.
</div>
</div>
</div>
<div class="feature feature-item-252"><img class="main" src="http://www.bylus.com/wp-content/uploads/bolitip.png" alt="" width="640" height="301" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PEN-LIKE PRECISION</h2>
</div>
<div class="feature_description_content">
Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.
</div>
</div>
</div>
<div class="feature feature-item-254">
<img class="main" src="http://www.btylus.com/wp-content/uploads/blueproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">BALL POINT</h2>
</div>
<div class="feature_description_content">
Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.
</div>
</div>
</div>
<div class="feature feature-item-256">
<img class="main" src="http://www.bylus.com/wp-content/uploads/greenproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">HEAVY METAL</h2>
</div>
<div class="feature_description_content">
Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.
</div>
</div>
</div>
</div>;
<?php
}
?>
Have a look at PHP's server variables. You are probably looking for $_SERVER['REQUEST_URI'].
if ($_SERVER['REQUEST_URI'] == "/index.php") {
echo "My stuff to show on /index.php";
}
Check out the WP Codex. I thing is_page() is what you are looking for: http://codex.wordpress.org/Function_Reference/is_page
You can either set a special variable on pages where you would like to check it (and use it in an if statement for the footer), or use the answer by #Christofer Eliasson, which uses the server's REQUEST_URI variable
what you want is:
<?php
if (is_page(array('page1','page2'))) {
<!-- Fotter content displayed here -->
}
?>