Creating a unique post type in Wordpress

Currently, I am in the process of converting a Bootstrap one-page template into a WordPress template. My goal is to incorporate a custom post type that will display items in the services portfolio while maintaining the same CSS styling. Here is the code snippet for my services section:

   <!-- Services -->
<section id="services" class="services bg-primary text-white">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-10 mx-auto">
        <h2>Our Services</h2>

        <hr class="small">
        <div class="row">

          <?php
              $args = array( 'post_type' => 'service', 'posts_per_page' => 10 );
              $the_query = new WP_Query( $args );
              ?>
              <?php if ( $the_query->have_posts() ) : ?>
              <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

              <div class="col-md-3 col-sm-6">
                                      <div class="service-item">
                                          <span class="fa-stack fa-4x">
                                              <i class="fa fa-circle fa-stack-2x"></i>
                                              <i class="fa fa-flask fa-stack-1x text-primary"></i>
                                          </span>
                                          <h4><?php the_title(); ?></h4>
                                          <p><?php the_content(); ?> </p>
                                          <a href="<?php the_permalink(); ?>" class="btn btn-light">Learn More</a>
                                      </div>
                                  </div>

              <?php wp_reset_postdata(); ?>
              <?php else:  ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>


        </div>
        <!-- /.row (nested) -->
      </div>
      <!-- /.col-lg-10 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

I am currently unsure of which function to add and how to proceed. Additionally, I need guidance on what needs to be replaced in the index.php file for different sections as well as the code for functions.php.

// Our custom post type function
 function create_posttype() {

     register_post_type( 'service',
     // CPT Options
         array(
             'labels' => array(
                 'name' => __( 'Services' ),
                 'singular_name' => __( 'Service' )
             ),
             'public' => true,
             'has_archive' => true,
             'rewrite' => array('slug' => 'service'),
         )
     );
 }
 // Hooking up our function to theme setup
 add_action( 'init', 'create_posttype'

);

After implementing the above code, I encountered a syntax error. Any suggestions on how to resolve this issue would be greatly appreciated.

Answer №1

For registering a custom post type, you can add the following code to your function.php file or create a separate plugin file:

// Custom post type registration
function create_posttype() {

    register_post_type( 'service',
        // CPT Options
        array(
            'labels' => array(
                'name' => __( 'Services' ),
                'singular_name' => __( 'Service' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'service'),
        )
    );
}
// Hook our function into theme setup
add_action( 'init', 'create_posttype');

To display the Service posts, use the following code:

<?php 
$args = array( 'post_type' => 'service', 'posts_per_page' => 10 );
$the_query = new WP_Query( $args ); 
?>
<?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="col-md-3 col-sm-6">
            <div class="service-item">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-flask fa-stack-1x text-primary"></i>
                </span>
                <h4><?php the_title(); ?></h4>
                <p><?php the_content(); ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-light">Learn More</a>
            </div>
        </div>

    <?php endwhile; ?> 
    <?php wp_reset_postdata(); ?>
<?php else:  ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging HTML div elements for forms can greatly enhance the user

I am in the process of developing a website where users can upload images, name them, and then submit the data to PHP code. Currently, I am using plain HTML and PHP for this project, but I intend to integrate the Bulma CSS library. The current HTML code l ...

Retrieve data from two different dropdown menus using jQuery

One of my pages is a simple PHP file named (time.php) <?php if($_GET['region'] == "europe" and !isset($_GET['timeformat'])){ $array = array("Berlin" => "15:30", "Paris" => "14:30 ...

What is the best way to generate a CSS design with wavy patterns?

Check out the image below to see what I am attempting to create: https://i.sstatic.net/PlroF.png Here is my current code, but I need to make it more dynamic, similar to increasing the frequency rate of a sin or cosine wave. #wave { position: relativ ...

Checking the source image with an if statement

I am trying to figure out how to create an If Statement in a jquery script that will check if a specific image file is the source, and if it is, execute the code within the If Statement. The condition for the If Statement should be based on whether the ima ...

Unique design and elements featuring the `width: auto` property for custom fonts

In my current project, I am utilizing the popular 'Open Sans' font family. However, I am encountering a specific issue. The problem arises with buttons and other elements that have width: auto. Upon page load, these elements initially have their ...

The issue with Grid component in Nested Single file Component

I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

I am just starting to learn AngularJS and I need help with binding column names (keys from key-value pairs) to a select list. I want to be able to retrieve the key name when the selection in the select list is changed. The select list displays: name, snip ...

Implement a substitution method that will convert designated text into a designated class

Hey there! I'm currently working on creating a jQuery function called replace that will swap out specific text in the HTML to assign it a class. I've been diving into jQuery and Html. Check out this fiddle: http://jsfiddle.net/davidThomas/juTtG/ ...

Creating a new webpage that automatically populates with multiple images from a server using PHP

I'm inquiring about generating a webpage automatically from an HTML template, How can I create a new webpage from an HTML template and display multiple images from the server on the generated page? Please review my code below, Thank You. The follo ...

NodeJS allows for seamless uploading of files

I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...

Develop a reusable block of Vue template when creating a new component

There are times when I find myself needing to repeat certain sections of HTML code in my Template just to keep it DRY. However, creating a new component and passing multiple props and dynamic data seems like too much work. Is there a simpler way to define ...

Is there a way to tally the checked mat-radio-buttons in Angular?

I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...

I can't seem to get my JavaScript to connect to my HTML file. What should I do next?

I'm facing a major issue at the moment. My HTML file doesn't seem to be linking properly with my JavaScript file, even though they are located in the same folder. The script link is correctly placed in the HTML file, but for some reason, it just ...

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

Using JQuery to rebind() after resetting the count

In my game, I have implemented a feature to ensure that the start button can only be clicked once each time it appears in order to prevent the function from loading multiple times. I wrote some code that tracks the number of clicks and unbinds the click e ...

Adjusting nearby parts when hovering in CSS

I'm curious as to why the size of the second div does not change when hovering over the third div, unlike when hovering over the first div. #block { width: 50%; white-space: nowrap; } .div { display: inline-block; text-align: center; } di ...

The addClass and removeClass functions in jQuery are functioning properly only on Firefox browser

Could someone help me understand why this code works in Firefox but not in Safari or Chrome? The variable newClass retrieves the value from a select box, which is then used to create a selector for adding or removing classes using addClass/removeClass. I ...

Is it possible to invoke this PHP function within an HTML document?

I'm in the process of developing a social networking platform that allows users to receive notifications when someone follows or unfollows them. The purchased plugin includes a function for notifying users about the number of notifications they have. ...

Do you require a lightbox for a white text box set against a semi-transparent black background?

Currently, I am in the process of developing a Chrome extension that will be compatible with my Android app. As part of this development, I need to code the HTML/CSS for the extension. The main functionality of the extension allows users to add tags to a s ...