How do I navigate proprely in WordPress (using custom posts)?

See more:

PHP

CMS

WordPress

bootstrap

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
                        <a href=""><span class="glyphicon glyphicon-th-list"></span></a>
                        /--

                        <?php next_post_link('%link', '<span class="glyphicon glyphicon-circle-arrow-right"></span>'); ?>
                </div>
          </div>
<?php get_footer(); ?>

Thank you for reading!