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!
Related
I'm creating a portfolio page using "WordPress posts" (this is so it spits out single.php pages nicely for me) using PHP and ACF. I'm trying to find a way to put each "category" in its own div. This would allow me to style the layout of the content within each filter. Please see the example below. Maybe I should be doing this a different way?
• Filter 1 - 1 column layout
• Filter 2 - 3 column layout
example of filter 1
example of filter 2
TLDR: Trying to put the content of each WordPress category in its own div.
<div class="work">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
<div class="work-copy">
<div class="category">
<?php echo get_the_category_list(); // Display categories as links within ul ?>
</div>
<h2 class="headline">
<?php the_title(); ?><i class="fal fa-chevron-right"></i>
</h2>
</div>
</div>
<?php endwhile; ?>
WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.
For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.
Category class added to body element by WordPress
You can use this CSS class to style each individual category differently by adding custom CSS.
You can find more details here
Quite a simple fix after doing some research, here is the answer I found useful;
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>">
Place this within each post. In order to style each div class individually, you need to place a containing div in between the if / while statement. Then you'll the place content of each "category filter" with the div.
<?php if ( have_posts() ) : // Do we have any posts in the database that match our query? ?>
<div class="work-container">
<?php while (have_posts()) : the_post(); ?> <!-- Finds the post -->
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>"> <!-- This calls out the Category in the WP Post -->
<div class="work-group">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
This was answered here and with a bit of playing I got it to work, Hope this helps someone! Get the name of the first category
I am using the ACF plugin to create custom fields for my wordpress site. Everything is going well with zero issues when I keep my code all on the same page. However, when I break the code into template parts, the ACF’s for each section’s hero and custom fields stopped outputting data. It’s almost as if being in template parts is making the fields read as empty, but when I reorder the get_template_parts php (ie, move content-rolls before content-pizza or vice versa), whichever part comes first displays correctly while the second does not.
<?php get_template_part('template-parts/home/content', 'callout'); ?>
<?php get_template_part('template-parts/home/content', 'menu'); ?>
<?php get_template_part('template-parts/home/content', 'pizza'); ?>
<?php get_template_part('template-parts/home/content', 'rolls'); ?>
The same thing happens if I move content-menu.php under content-pizza.php – the ACF’s stop showing that anything is filled into them on the backend. I suspect the issue is in the content-pizza.php (content-rolls.php is the same code copied, with the correct variables filled in), but I can’t see what the issue is.
The content-pizza.php page coding is:
<?php
/**
* Template part for displaying pizza content in page-home.php
*
* #link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* #package JJs_Pizza
*/
// Variables
$pizza_hero = get_field('pizza_hero');
$pizza_custom = get_field('pizza_custom');
$pizza_args = array(
'posts_per_page' => 50,
'post_type' => 'food',
'category_name' => 'pizza',
'orderby' => 'post_id',
'order' => 'ASC'
);
?>
<!-- Pizza Section -->
<section class="menu-pizza mt-4" id="pizza">
<div class="row no-gutters p-3">
<div class="col">
<?php if( !empty($pizza_hero) ) : ?>
<?php echo($pizza_hero); ?>
<?php endif; ?>
</div>
</div>
<div class="row p-3 justify-content-center">
<?php if ( !empty($pizza_custom) ) : ?>
<div class="col-lg-4 col-sm-6 col-xs-12 custom-menu pt-2">
<?php echo($pizza_custom);?>
</div>
<?php endif; ?>
<?php $loop = new WP_Query($pizza_args);?>
<?php while( $loop ->have_posts() ) : $loop->the_post(); ?>
<div class="col-lg-4 col-sm-6 col-xs-12 menu p-4">
<div class="row">
<div class="col d-flex justify-content-center">
<?php if (get_field('image')):?>
<img src=”<?php the_field('image'); ?>" class="img-fluid">
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="text-center"><?php the_title();?></h3>
<p class="text-center mx-auto">
<?php
$labels = get_field(‘labels’);
if( $labels && in_array(‘vegetarian’, $labels) ) {
echo(‘<i class="fas fa-leaf"></i>');
}
?>
<?php
$labels = get_field(‘labels’);
if( $labels && in_array(‘spicy’, $labels) ) {
echo(‘<i class="fas fa-fire"></i>');
}
?>
</p>
<?php if (get_field('description')):?>
<p class="text-center"><em><?php the_field('description');?></em></p>
<?php endif; ?>
</div>
</div>
</div>
<?php endwhile;?>
</div>
</section><!-- End Pizza Section -->
I also uploaded the code I have so far to a live site at https://demo.jjs-pizza.com/ but so far, the only dynamic sections I’ve coded are the pizza and pizza rolls section so you can get an idea of the issue.
Thank you in advance for any help! If worse comes to it, I’ll just nix the template parts and work from the same page, but for the sake of cleaner code, I’m hoping for a solution.
You are calling WP_Query in your templates and not resetting the post data afterwards. I suspect it is something to do with this, although it is difficult to tell without seeing all of the code, how the fields are set up and on what pages, and how it all works together.
If we look at what's happening in the code:
First, your content-pizza.php template part gets executed
It gets the pizza_hero and pizza_custom fields for the current post (presumably set on the homepage?)
Then it does a custom WP_Query and loops through all of the posts in it
Next up your content-rolls.php template part gets called. Assuming is is the same code as content-pizza...
it then to get the pizza_hero and pizza_custom fields for the current post. However because the code doesn't reset the post data after the WP_Query, the current post is still the last post from that loop.
I'm not sure what post this is supposed to be calling get_field on, but I suspect it isn't the post that is still set up as the current post after the custom query.
When you are finished with a custom loop, you can call wp_reset_postdata to reset the post data after you have finished the loop for that query, like this:
<?php $loop = new WP_Query($pizza_args);?>
<?php while( $loop ->have_posts() ) : $loop->the_post(); ?>
// do stuff...
<?php endwhile;?>
<?php wp_reset_postdata(); /* RESET POST DATA HERE */ ?>
You can find out more about wp_reset_postdata in the WP Code Reference for it
Try adding wp_reset_query() after each loop! You need to destroy the existing query to run a new one.
I'm creating a custom WP theme - within the site, there is an employee section. Using 'Advanced Custom Fields' repeater, I've made it possible for WP users to go to a page and add/change/delete employee members.
I'm wanting this employee section to be added to other places on the website, but only needs to be updated in one place - rather than having to go into several pages to make the same changes.
I'm relatively new to WP dev and PHP, but here's what I've tried:
I've created a new php file with only the employee section:
<?php /* Template Name: StaffSection */ ?>
<h1>Testing</h1><!-- This line runs fine -->
<?php<!-- None of this runs -->
// check if the repeater field has rows of data
if( have_rows('employees') ):
// loop through the rows of data
while ( have_rows('employees') ) : the_row(); ?>
<div class="col-lg-3 col-md-6 gap">
<a href="<?php the_sub_field('employee-link'); ?>">
<img class="leadership-img" src="<?php the_sub_field('employee-image'); ?>">
<h4 class="position"><?php the_sub_field('employee-name'); ?></h4>
</a>
<p class="position"><?php the_sub_field('employee-title'); ?></p>
</div>
<?php endwhile;
else :
// no rows found
endif; ?>
On the page that I'm wanting to 'include' this section on:
<section id="leadership" class="section">
<div class="container-fluid">
<div class="wrapper">
<div class="row leadership-section">
<?php include 'staff-section.php'; ?>
</div>
</div>
</div>
</section>
Within WP, I've created a new WP page and linked it to the 'StaffSection' template that I created. I have 'Advanced Custom Fields' on that page to pull content that WP users define.
I know the 'include' function is working with that test h1 tag, but any idea why it isn't reading the php repeater loop below that?
It could be that if ( have_rows('employees') )... etc etc is returning false because there is no 'employees' repeater that belongs to the post object defined within the loop.
One solution I use to make a field that is displayed across many pages is to create a secondary query to retrieve the repeater.
For instance, we can do this.
1. create a post with the category 'employees'
2. Go to ACF and set the logic so the repeater only appears on posts with category 'employees'
3. Query post object with category 'employees'
4. Access repeater from within the query
<?php
$repeater_query = new WP_Query(array('category_name' => 'employees'))
if ($repeater_query->have_posts() ) {
while ($repeater_query->have_posts() ) {
$repeater_query->the_post();
// check if the repeater field has rows of data
if( have_rows('employees') ):
// loop through the rows of data
while ( have_rows('employees') ) : the_row(); ?>
<div class="col-lg-3 col-md-6 gap">
<a href="<?php the_sub_field('employee-link'); ?>">
<img class="leadership-img" src="<?php the_sub_field('employee-image'); ?>">
<h4 class="position"><?php the_sub_field('employee-name'); ?></h4>
</a>
<p class="position"><?php the_sub_field('employee-title'); ?></p>
</div>
<?php endwhile;
else :
// no rows found
endif;
}
} wp_reset_postdata();
I hope this helps. Cheers
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'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>