Applications – ACF Boot – Bootstrap Material Library with ACF integration.

A0009

Expand

Code With ACF Integration

HTML

<!-- A0009 -- Start ------------------------------>
<?php if ( have_rows( 'a0009' ) ) : ?>
	<?php while ( have_rows( 'a0009' ) ) : the_row();?>
<section id="a0009">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2><?php echo get_sub_field('header'); ?></h2>
				<p class="wa_09_sbh"><?php echo get_sub_field('subheader'); ?></p>
			</div>
		</div>
        <div class="row">
            <?php if ( have_rows( 'items' ) ) : ?>
	            <?php while ( have_rows( 'items' ) ) : the_row();?>
            <div class="col-12 mt-">
				<div class="wa_09_post">
					<h3><?php echo get_sub_field('title'); ?></h3>
					<p><?php echo get_sub_field('description'); ?></p>
					<?php if(get_sub_field('additional_info') != "") : ?>
					<p><a href="<?php echo get_sub_field('additional_info'); ?>" target="_blank">Additional details.</a></p>
					<?php endif; ?>
					<p class="wa_09_apply"><a href="<?php echo get_sub_field('link'); ?>?job=<?php echo get_sub_field('title'); ?>">Apply Now</a></p>
				</div>
            </div> 
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
	</div>
</section>
	<?php endwhile; ?>
<?php endif; ?>
<!-- a0009 -- END ------------------------------>

CSS

/* A0009 Start ----------------------------------------------------------*/
#a0009 h2{
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    color: #cf9810;
    text-align: center;
    margin-top: 30px;
}
#a0009 .wa_09_sbh{
	font-size: 1.3em;
    font-style: italic;
    margin-bottom: 40px;
}
#a0009 .wa_09_post {
    margin-bottom: 20px;
    border: solid 2px #dcdcdc;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    padding: 20px;
    border-radius: 5px;
}
#a0009 h3{
    text-align: left;
}
#a0009 .wa_09_apply{
	font-weight: 600;
    font-size: 1.3em;
}
.wa_apply_now{
	border: solid 2px #9e9e9e;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    margin-bottom: 30px;
}
/* A0009 END ----------------------------------------------------------*/

Code Only (Without ACF Integration)

HTML

<!-- A0009 -- Start ------------------------------>
<section id="a0009">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2>Header</h2>
				<p class="wa_09_sbh">Subheader</p>
			</div>
		</div>
        <div class="row">
            <div class="col-12 mt-">
				<div class="wa_09_post">
					<h3>Job Title</h3>
					<p>Job Description</p>
					
					<p><a href="LINK TO FILE" target="_blank">Additional details</a></p>
					<p class="wa_09_apply"><a href="LINK_TO_PAGE_CONTAINING_TMP_APPLY_PHP_FILE?job=JOB_TITLE">Apply Now</a></p>
				</div>
            </div> 
        </div>
	</div>
</section>
<!-- a0009 -- END ------------------------------>

CSS

/* A0009 Start ----------------------------------------------------------*/
#a0009 h2{
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    color: #cf9810;
    text-align: center;
    margin-top: 30px;
}
#a0009 .wa_09_sbh{
	font-size: 1.3em;
    font-style: italic;
    margin-bottom: 40px;
}
#a0009 .wa_09_post {
    margin-bottom: 20px;
    border: solid 2px #dcdcdc;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    padding: 20px;
    border-radius: 5px;
}
#a0009 h3{
    text-align: left;
}
#a0009 .wa_09_apply{
	font-weight: 600;
    font-size: 1.3em;
}
.wa_apply_now{
	border: solid 2px #9e9e9e;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    margin-bottom: 30px;
}
/* A0009 END ----------------------------------------------------------*/

Apply Now Template File: a0009_tmp_apply

Formidable Forms Form File: A0009_formidable

Steps to integrate:

Download all of the files(Jason for ACF Fields File, Template File, Formidable File)
Add template file to the directory.
Go to WordPress, create a job application page and set page template to “Find Work Page”
Import Formidable forms import.
Make sure that your applications page shows the formidable form.
Add CSS to the stylesheet
Add HTML to the page you want to see your job posts.
Go to ACF and import Jason file to import fields. Make sure to specify specific page template where they need to appear.

Pagination BugFix for Wordpress 5.9

Expand

Add this code to functions.php

add_action(‘pre_get_posts’, ‘codernote_pre_get_posts’);
function codernote_pre_get_posts( $query ) {
if ( $query->is_main_query() && !$query->is_feed() && !is_admin() ) {
$query->set( ‘paged’, str_replace( ‘/’, ”, get_query_var( ‘page’ ) ) );
}
}

add_action(‘admin_head’, ‘my_custom’);

In the queries with paginations use this code

$cur_page = $GLOBALS[‘wp_query’]->query[“paged”];

like that

$args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => 7,
‘paged’ => $cur_page,
);

$wp_query = new WP_Query($args);

because standart code get_query_var(‘paged’) isn’t work in this wordpress version and you don’t get the another page

Pagination

Expand

Code With ACF Integration

HTML

<!-- Pagination ---------------------------------------------------->
                    <script>
                        function navigate() {
                            var value = document.getElementById('blo-cnter').value;
                            if (value > 1) {
                                window.location.href = '/category/<?php echo $slug; ?>/page/' + value;
                            } else {
                                window.location.href = '/category/<?php echo $slug; ?>';
                            }
                        }
                    </script>
                    <div class="pagination-with-dots">
                        <?php
                        $activel = "";
                        $activer = "";
                        $prev = $cur_page - 1;
                        $next = $cur_page + 1;
                        if ($next > $my_posts->max_num_pages) {
                            $urlnext = "#";
                        } else {
                            $activer = "nav-ar-active";
                            $urlnext = "/category/" . $slug . "/page/" . $next;
                        }

                        if ($prev < 1) {
                            $urlprev = "#";
                        } else {
                            $activel = "nav-ar-active";
                            if ($prev > 1) {
                                $urlprev = "/category/" . $slug . "/page/" . $prev;
                            } else {
                                $urlprev = "/category/" . $slug;
                            }
                        }

                        ?>
                        <div>
                            <a class="nav-ar <?php echo $activel; ?>" href="<?= $urlprev ?>"> <img
                                        src="<?php echo $tmp_dir; ?>Vectorl.svg"> </a>
                        </div>

                        <?php
                        if ($cur_page > 1) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/1" ?>"> 1 </a>
                            </div>
                            <?php
                        }
                        ?>

                        <?php
                        if ($cur_page>2) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/2" ?>"> 2 </a>
                            </div>
                            <?php
                        }
                        ?>

                        <?php
                        if ($cur_page>3) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/".($cur_page-1) ?>"> ... </a>
                            </div>
                            <?php
                        }
                        ?>

                        <div>
                            <a class="nav-ar-num nav-ar-active-number"
                               href="<?= "/category/" . $slug . "/page/" . $cur_page ?>"> <?=$cur_page ?></a>
                        </div>

                        <?php
                        if ($cur_page1 < $my_posts->max_num_pages) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/" . $cur_page1 ?>"> <?= $cur_page1 ?> </a>
                            </div>
                            <?php
                        }
                        ?>

                        <?php
                        if (($cur_page1+1) < $cur_page_max_preend) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/" . ($cur_page1+1) ?>"> ... </a>
                            </div>
                            <?php
                        }
                        ?>


                        <?php
                        if ($cur_page1 < $cur_page_max_preend) {
                        ?>
                        <div>
                            <a class="nav-ar-num"
                               href="<?= "/category/" . $slug . "/page/" . $cur_page_max_preend ?>"> <?= $cur_page_max_preend ?> </a>
                        </div>
                        <?php
                        }
                        ?>

                        <?php
                        if ($cur_page < $cur_page_max_end) {
                            ?>
                            <div>
                                <a class="nav-ar-num"
                                   href="<?= "/category/" . $slug . "/page/" . $cur_page_max_end ?>"> <?= $cur_page_max_end ?> </a>
                            </div>
                            <?php
                        }
                        ?>

                        <div>
                            <a class="nav-ar <?php echo $activer; ?>" href="<?= $urlnext ?>"> <img
                                        src="<?php echo $tmp_dir; ?>Vectorr.svg"> </a>
                        </div>
                    </div>
                    <!-- Pagination end ------------------------------------------------>

CSS

/*-- pagination ----------------------------- */
.pagination-with-dots{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px , 1fr));
    max-width: 400px;
    float: right;
    padding-right: 20px;
    grid-gap: 2px;
    margin-bottom: 30px;
    margin-top: 10px;
}
.nav-ar{
    background: #CACACA;
    border-radius: 5px;
    padding: 2px 5px;
}

.nav-ar-active{
    background: #2E6DC8;
}

.nav-ar-num{
    background: #2E6DC8;
    border: 1px solid #2E6DC8;
    box-sizing: border-box;
    border-radius: 5px;
    width: 26px;
    display: block;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #F5F4FA !important;
}

.nav-ar-active-number{
    background: #FFFFFF;
    border: 1px solid #2E6DC8;
    box-sizing: border-box;
    border-radius: 5px;
    display: block;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #252A2E !important;
}
/*-- pagination end ------------------------- */

arrows