I have tried many tutorials for custom header support but i am able to add up the support but i am not able to change header..Down here is Index.php
<div id="page">
<div id="header"><h1>Super Plain</h1></div>
<div id="nav">
<ul>
<?php wp_list_pages('title_li=');?>
</ul>
</div>
<div id="main">
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div><!--/ #content -->
<div id="sidebar">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare sodales porta. Mauris laoreet tempor luctus. Nunc consequat </p>
</div><!--/ #sidebar -->
</div><!--/ #main -->
</div><!--/ #page -->
here is my css
#header{
background-color:#c1d9c5;
color:#405952;
padding:55px;
}
#header h1{
margin:0;
font-size:72px;
font-weight:normal;
}
and here is my function.php file
<?php
$args = array(
'width' => 980,`enter code here`
'height' => 60,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );
?>
Why you are try to enable custom header when you can change your header image easily by editing CSS stylesheet?
Related
I have created a new page template for specific pages in wordpress, I am able to select that from wordpress pages template selection but when browsing to the page I get error 500 rest of the site is working fine. Website is hosted on CDN and using W3 Total Cache plugin.
Below is the wordpress page template code:
<?php
/* Template Name: PackageDetails */
get_header(); ?>
<div class="container hds-custom">
<div class="row">
<div class="grey-bg clearfix">
<div class="col-sm-6">
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}?>
</div>
<div class="col-sm-6">
<?php $page_images =& get_children( array ( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image' ));
if ( empty($page_images) ) { ?>
<h2>BOOKING AND RESERVATION (24/7)</h2>
<p>MOBILE NO: 123456798 / 123456798</p>
<?php echo do_shortcode('[contact-form-7 id="552" title="Booking & Reservation"]')?>
<div class="alert alert-warning mt-1 mb-1">
Important note / Cancellation / Amendment / Refund policy:
</div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quam.</li>
</ul>
</div>
</div>
</div>
</div>
<?php get_footer('inner'); ?>
Try this code
<?php
/*
Template Name: PackageDetails
*/
get_header(); ?>
<div class="container hds-custom">
<div class="row">
<div class="grey-bg clearfix">
<div class="col-sm-6">
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}?>
</div>
<div class="col-sm-6">
<?php $page_images =& get_children( array ( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image' ));
if ( empty($page_images) ) { ?>
<h2>BOOKING AND RESERVATION (24/7)</h2>
<p>MOBILE NO: 123456798 / 123456798</p>
<?php echo do_shortcode('[contact-form-7 id="552" title="Booking & Reservation"]')?>
<div class="alert alert-warning mt-1 mb-1">
Important note / Cancellation / Amendment / Refund policy:
</div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quam.</li>
</ul>
<?php } ?>
</div>
</div>
</div>
</div>
<?php get_footer('inner'); ?>
you didnt close the if ( empty($page_images) ) {
The 500 Internal Server Error could have been caused due to multiple reasons. A corrupt .htaccess file is one of the common issues.
You could try to rename the file by logging in to the FTP server. Also, visit the Permalinks page in the Settings menu and save the page to generate the rewrite rules.
Also, try to deactivate the cache plugin and check if the page works fine.
I have a slider and I have added it in my wordpress project and its working fine as per my expectation.
How I did add slider without plugin
I have entered following code in the following files..
/*.........HEADER.PHP......*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
/*............... FOOTER.PHP ...........*/
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
/*.................... INDEX.PHP ........................*/
<div class="wrapper">
<div class="cont col-12 col-m-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active col-12">
<img src="<?php bloginfo('stylesheet_directory')? >/images/demo/slider/sdslider-1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis. </p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic3.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic2.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic4.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified col-12">
<li data-target="#myCarousel" data-slide-to="0" class="active">College Overview</li>
<li data-target="#myCarousel" data-slide-to="1">Our Collaborators</li>
<li data-target="#myCarousel" data-slide-to="2">Workshops</li>
<li data-target="#myCarousel" data-slide-to="3">Guest Lectures</li>
<li data-target="#myCarousel" data-slide-to="4">Industrial Visits</li>
</ul>
</div><!-- End Carousel -->
</div>
</div>
So by adding these code in php files slider is working fine.
So whats the problem?
Problem is that code which I have entered in index.php that code I wants to add in wordpress page. Because if I leave my code in index.php then In future I have to use filezila to upload new images, So I wants to add html in wordpress page instead of index.php.
I tried to add code of index.php into wordpress page But that method is not working, don't know what's the reason. I tried to find solution but didn't get sufficient answer.
This is because you can't use php code directly in Wordpress. Simple way to do this is to place your javascript and css code in header.php or footer.php file of your Wordpress theme.
Best is to keep all your css files and code in header.php and javascript files and code in footer.php.
/*....WP-Content/Themes/Selected-Theme/header.php ...*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
/*....WP-Content/Themes/Selected-Theme/footer.php ...*/
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
Then in your carousel code update slider [image src=""] with full url according to your live website like this:
<img src="http://YOUR-WP-WEBSITE/wp-content/themes/YOUR-THEME-DIRECTORY/images/demo/slider/sdslider-1.jpg" width="100%">
After updating your images path in carousel code you can paste it in any page through WP-Admin.
Note: Wordpress also adds paragraph "p" tags automatically this can produce an issue for bootstrap slider. If this happens then you need to place below code in functions.php file of your theme. Taken from here
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
I've been having issues with my blog template from a basic wordpress theme.
The issuse is that the footer & the side bar are somehow still contained within the container div. I've gone through the code countless times now and i just cannot see what the issues is, all the closing tags are in the correct place but it still buggers up.
th website i'm creating is dev.pearlofbeauty.co.uk/blog
the code that i'm using for the blog template:
<div class="container">
<div class="column_680 m_bottom_20">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged
);
query_posts($args);
while ( have_posts() ) : the_post();
?>
<div class="column_210 m_top_55">
<?php the_title(); ?>
<p class="blog_info">
Date: <span><?php the_time('F d,') ?></span> <span><?php the_time('Y') ?></span><br />
Author: <span><?php echo the_author_meta('nickname', get_the_author_meta( 'ID' ) ); ?></span><br />
Comments: <span><?php comments_number() ?></span><br />
Categories: <span><?php the_category(', '); ?></span>
</p>
</div><!--end column_210-->
<div class="column_440 m_top_65 last">
<?php if( has_post_thumbnail() ){ the_post_thumbnail('blog'); }else{ ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/blank-blog.png">
<?php } ?>
</div><!--end column_440-->
<div class="clear"></div>
<div class="post_content m_top_15">
<p><?php content('50') ?></p>
<a class="button read_more rounded" href="<?php echo get_permalink(); ?>">Read More</a>
</div>
<div class="clear"></div>
<?php endwhile; ?>
<div class="more_post m_top_15 m_bottom_185">
<?php echo pagination(); ?>
</div>
</div><!--end column_680-->
<!--sidebar-->
<?php get_sidebar(); ?>
<!-- End Sidebar -->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
<?php get_footer(); ?>
The problem is the result of
<p><?php content('50') ?></p>
This part returns:
<h4 style="font-style: italic; color: #000000;">
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</h4>
<h5 style="color: #000000;">
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</h5>
<div style="color: #000000;">
<div class="lc">
<h2 class="what"></h2>
<strong>Lorem Ipsum</strong> is simply dummy text of.
As you can see you're missing 2 closing div tags.
does anyone have an idea on the css that would turn the following in to a linked block?
<div class="one_third">
<?php
//The Query
query_posts('posts_per_page=1&cat=15');
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<small><?php the_time('F jS, Y') ?></small>
<?php if ( has_post_thumbnail()) the_post_thumbnail('medium-thumbnail'); ?>
<div class="entry">
<p><a style="display: block;" rel="bookmark" href="<?php the_permalink(); ?>"><?php echo strip_tags(get_the_excerpt());?></a></p>
Sorry, no posts matched your criteria.
Thanks
#Sotiris
Sorry for the late reply only get to work on this site after working hours.
<div class="one_third">
<h2>News Letters Suday test post</h2>
<small>May 15th, 2011</small>
<div class="thumbnail"><img width="190" height="140" src="http://localhost:8888/edinburghshiatsuclinic/wp-content/uploads/2011/05/front-page3-200x147.jpg" class="attachment-medium-thumbnail wp-post-image" alt="front-page3" title="front-page3" /></div> <div class="entry">
<p><a style="display: block;" rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/.">Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis … Continue reading →</a></p>
</div>
</div>
Well, based on the code you posted, everything in the div is a link already. If you want clicking anywhere on the div to work like a link, you'll need to use Javascript--can't really wrap a block-level element (<div>) in an inline element (<a>).
Here is a jQuery way to do that:
$('#one_third').click(
function(){
$(this).find('h2 a').click();
});
It just says "when you click on the div with id 'one_third', look for the element 'h2 a' in it and trigger a click on that element. (I narrowed it down to just one of the links, if you didn't do that, if you just said ('a'), it would click all the links. Which could be interesting as well.)
I am trying to pull content from specific categories and have them appear on the homepage along with an image that is pulled from the custom field for that entry. Everything looks like it is working ok.. and the second entry works as it should, however with the first entry, only the image links back to the post, the title and read more link are not recognized by the mouse as links. Looking at the html, it seems like the php is printing everything as it should, so I figured it must be a CSS problem, but I cleared all the relevant styles and the links still are not recognized.
Here is the php I have for the home page
<?php
// Show custom fields from Food Category
query_posts('showposts=2&cat=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// This is added to show <!--more--> on home page
global $more;
$more = 0;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php
$values = get_post_custom_values("food_thumb"); echo $values[0]; ?>" alt="" /></a></div>
<div class="span-3">
<p class="smallTitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></p></div>
<div class="span-1 theDate">
<?php the_time('m.d.y') ?>
</div>
<div class="span-4">
<?php the_content('<span class="moretext">Read more...</span>'); ?>
</div>
<?php endwhile; ?>
The HTML output looks fine..
<div class="span-4 fixed-height-sidebar">
<div class="smallthumb"><img src="foodthumb.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=24" rel="bookmark">
Food Test 1</a></p></div>
<div class="span-1 theDate">
07.16.09</div>
<div class="span-4 fixed-height-sidebar">
<p>Mmmmmmmm. Food. Aliquam libero libero, luctus ut tristique pulvinar, euismod at diam. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, <span class="moretext">Read more…</span></p>
</div>
<div class="smallthumb"><img src="http://.com/wp-content/uploads/2009/07/foodthumb2.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=3" rel="bookmark">
Food test page -2</a></p></div>
<div class="span-1 theDate">
07.12.09</div>
<div class="span-4">
<p>“Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec odio vitae nunc euismod vulputate. Integer aliquam ullamcorper tortor, nec suscipit magna viverra in. Nunc urna neque, dapibus id congue et, dignissim vitae augue. Aliquam et bibendum lacus. <span class="moretext">Read more…</span></p>
</div>
</div>
Here is a screenshot to help explain my problem...
alt text http://zacharydesigns.com/temp/wpsample.jpg
I took your HTML output, and pasted it into a blank HTML page (adding the HTML/HEAD/BODY tags). Both links rendered and worked correctly. I tested in Firefox and IE. From the looks of it, your HTML output is just fine.
Any chance you could post the output of the entire page?
--Adam
What does fixed-height-sidebar do in the CSS?
That's the only difference between the two entries.