I'm trying to install the "Advanced AJAX Page Loader" plugin on my Wordpress site. The theme installation says to "make sure your theme has the content area wrapped in a tag such as a DIV with an id attribute called "content"".
My theme has what looks like a variable div wrapper around my content in the page.php file:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="page-<?php the_ID(); ?>" class="type-page" itemscope itemtype="http://schema.org/Article">
<!-- page-title -->
<?php if($themify->page_title != "yes"): ?>
<h1 class="page-title" itemprop="name"><?php the_title(); ?></h1>
<?php endif; ?>
<!-- /page-title -->
<div class="page-content entry-content" itemprop="articleBody">
<?php the_content(); ?>
My questions are, does it look like I am looking at the right section of code, i.e.
If so, how would I identify the corresponding div wrapper, which looks like it's variable based on page ID: ?
The instructions are asking you to wrap your content area in a div with an id of 'content'. Your code above doesn't have that;
<div id="content">
// content here
</div>
Related
did read alot on stackoverflow and wordpress documentation but nothing works
iam using newest WP version
i createt a template named contact.php
<?php
/*
* Template Name: Contact Template
* description: >-
Page template
*/
get_header();
?>
everything works , you can choose the template in wp admin dashboard when creating a new site
but the post loop dosent work. only on the index.php
this code i use in index. works fine. if i copy over to my template it will not load the posts
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="col-12 mt-4 mb-4 justify-content-center text-center">
<a href="">
<h1><a href="<?php the_permalink(); ?>">
<?php the_title(); ?> </a></h1>
</a>
<hr>
<p> <?php the_excerpt(); ?> <br> </p>
<style>
img {
height: 200px;
width: 200px;
border-radius: 20%;
}
</style>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?><br>
<p> <?php the_author(); ?> <?php the_date(); ?><br> </p>
<p></p>
</div>
<?php endwhile; ?>
<!--end the while loop-->
<?php else : ?>
<!-- if no posts are found then: -->
<p>No posts found</p> <!-- no posts found displayed -->
<?php endif; ?>
<!-- end if -->
</div>
Actually when you create a new template into Wordpress theme folder directory you should copy from the one that is used from your template to render the post list.
As you can see here from wordpress documentation index.php is just the deepest level wordpress reach if it doesn't find any other suitable template.
If you are unsure of what template to use i suggest you to install query monitor and see from the wpadmin top bar in your frontend which is the template for a standard post loop page.
If you copied from the correct template there should be no standard reason of why that should fail. If it doesn't work for you what i can suggest is to see if the problem still happens with default template (like twentytwenty) or disabling all your plugins.
I am creating my own custom theme from scratch and have run into a bit of trouble. On the blog page, each time a new post is displayed, it is smaller than the last. This is due to me setting the width of the blog post to 33.3%. Also each blogpost gets displayed slightly right of the one previous to it. How can I have each blog post be 33.3% of the content area and be displayed side by side, 3 per row? I am using wordpress functions to call each blog post. I am only displaying the blog posts thumbnail and when you click the thumbnail it takes you to the post. So basically 3 images side by side.
[BONUS]: How could I get text to display horizontally and vertically on hover over each blog post image?
I know this is a lot to ask, but I have been trying to work this out for days. A JS Fiddle or Codepen would be greatly appreciated.
Index.php:
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
You should use bootstrap and do something like this :
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div class="col-md-4">
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Take care to remove the width: 33.33%; CSS rule and close your <div> tags in the loop, not after.
Hope it helps
[EDIT]
See this link for more information about how to use column classes with bootstrap : grid example basic
[EDIT #2]
You could do it without bootstrap but it will be a bit more difficult. You'll have to set the "display" to "inline-block" and set the width of the divs with taking care of the inherit margin of these tags. In this example, I had to set it to 32%. Here is the fiddle
I want to redesign my website using WordPress and Bootstrap. I did most of the work, however, I have trouble navigating through my pages.
Before I tell you anything, just want you to know that my "tutorials" is "tutorijali" and my "tutorial" is "tutorijal". So just added that "j" there (because I'm not from England or English-speaking country).
OK, so, I made a custom post type "tutorijal". But, I noticed that when the custom post type's name is "tutorijal", I get the URL like this :
domain-name/tutorijal/
...
Since "tutorijal" is singular and "tutorijali" is plural, I changed the custom post type's name to "tutorijali" (so that my URL goes as I want it to go).
Then I made page-tutorijali.php and applied that theme (which I named "Tutorijali theme") to my XHTML and CSS page. But, what happens is that I have a conflict.
In WordPress, I have a Wordpress page named "Tutorijali" and my custom post type's name is also "tutorijali".
You can see my navigation structure here and notice that I have a WordPress page which is named the same as my custom post type, "Tutorijali" : http://imgur.com/2zgH5dD
If I go to
domain-name/tutorijali/xhtml-and-css
I get my default post template and not the "Tutorijali theme" I applied. However, that "Tutorijali theme" is applied on Tutorijali WordPress page, without me ever setting it to be applied.
So, if you go to
domain-name.com/tutorijali
you can see the ordered list with all of the tutorials, however, if you go to a specific sub-item of the WordPress page "Tutorijali", you get the default post template, even if you specifically change that WordPress page (from the Admin panel) to "Tutorijali template".
Maybe my WordPress page and my custom post type can't share same name, I'm not sure.
Now, I when the user goes to
domain-name/tutorijali
I'd like him to have only the names of tutorial series, but if he goes on one specific serie, let's say XHTML and CSS, then the URL would be
domain-name/tutorijali/xhtml-and-css
and the user would get all of the XHTML and CSS tutorials in ordered list.
I have a parent custom post which is named "XHTML and CSS" (as my tutorial serie name) and it's child elements (also custom posts named "tutorijali") are specific tutorials from that serie.
I also have one other problem, and that is that my list is also displaying the parent post, so my list goes like this :
XHTML and CSS (since it's "order" value is set to 0)
Installing the program ("order" set to 1 and so on)
Tags
Basic elements of a website ...
So I'd like to get rid of that and obtain the structure I wanted (on Tutorijali - tutorial serie names, on specific tutorial serie - list of the tutorials).
Here's the code for my page-tutorijali.php :
<?php
/*
Template Name: Tutorijali Template
*/
?>
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
<?php endwhile; else :?>
<div class="page-header">
<h1>O ne!</h1>
</div>
<p>Na ovoj stranici nema sadržaja.</p>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-12">
<?php
$args = array( 'post_type' => 'tutorijali', 'order' => 'asc', 'posts_per_page' => -1 );
$the_query = new WP_Query( $args );
echo "<ol>";
if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
echo "<li>";
echo "<a href='".get_permalink()."'>".get_the_title()."</a>";
echo "</li>";
endwhile; endif;
echo "</ol>";
?>
</div>
</div>
<?php get_footer(); ?>
I also have a question regarding my single-tutorijali.php. I have created it to display these custom post pages differently than "normal" posts. I link to the previous and to the next tutorial well, however, I don't know how I can link from a tutorial to the list.
So let's say the user is at the tutorial "Installing the program", URL would go :
domain-name/tutorijali/xhtml-and-css/installing-the-program
and if he clicks on the link to take him back to the list, he would go to :
domain-name/tutorijali/xhtml-and-css
but I have trouble doing that, so maybe you can tell me how I can do that.
Here's the code for my single-tutorijali.php :
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
<?php endwhile; else :?>
<div class="page-header">
<h1>O ne!</h1>
</div>
<p>Na ovoj stranici nema sadržaja.</p>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-12 yt-link">
<p> <a class="btn brn-large btn-primary" href="<?php the_field('link'); ?>"> Pogledajte tutorijal na Youtube -u </a> </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 prev-next">
<?php previous_post_link('%link', '<span class="glyphicon glyphicon-circle-arrow-left"></span>'); ?>
/-- this is that link I was talking about, one that takes you back to the list of tutorials
<span class="glyphicon glyphicon-th-list"></span>
/--
<?php next_post_link('%link', '<span class="glyphicon glyphicon-circle-arrow-right"></span>'); ?>
</div>
</div>
<?php get_footer(); ?>
Thank you for reading!
When I click "read more" at the bottom of one of my website posts, it just loads the rest of the text in the same page and the same section, thus overflowing elements with text and spoiling my layout. I noticed there is a <!--more--> tag at the end of every Wordpress post when Read More is added from the toolbar. How can I override default behavior of this tag so that a new page is opened when a user clicks "Read More..." for a post?
Update:
Post content is loaded from a php file named tazeha.php using jQuery code.
tazeha.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<?php
require('wp-config.php');
?>
</head>
<body>
<?php
$cat_id=get_cat_ID('تازه ها');
$posts = get_posts ("cat=$cat_id&posts_per_page=1");
if ($posts)
{
foreach ($posts as $post):
setup_postdata($post); ?>
<h2><?php the_title(); ?></h2>
<?php the_content();?>
<?php endforeach;
}
?>
</body>
</html>
Can I change the code above so that the text after a post's "" tag opens up in a new browser page (tab)?
Following a Stackoverflow post, I added a single.php into my theme folder with the code below worked perfect i.e. my full post content is displayed in a new page when I click "read more..." link for any of my posts.
single.php
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<h3><?php the_category(' › '); echo " › "; the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')