Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact.

Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress.

  1. functions.php
<?php

function our_theme_dependencies(){ ?>

    <script>alert("its working"); </script>

    <?php

    //css libraries
    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/assets/css/style.css');
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri().'/assets/css/jquery.bxslider.css');
    wp_enqueue_style('plugin-set', get_stylesheet_directory_uri().'/assets/css/plugin.css');

}

add_action('wp_enqueue_scripts', 'our_theme_dependencies');

?>
  1. front-page.php
<?php get_header(); ?>

        <div class="notice-board-row">
            <div class="container notice-board-container">
                <div class="notice-board-wraper">
                    <h3>Notice Board</h3>
                    <div class="notice-board-slider">
                        <div class="notice-item">
                            <div class="date">
                                <span class="month">Jan</span>
                                <span class="no">22</span>
                                <span class="year">2020</span>
                            </div>

<?php get_footer(); ?>

I anticipate that the WordPress version of the site will retain the same theme as the original HTML site.

Answer №1

Transformed an HTML page into a WordPress site

The CSS isn't displaying correctly

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

Dealing with JSON data in the format of `(Object object)` requires a specific approach

I originally encountered object object when attempting to display JSON API data in HTML. I then used keyvalue in *ngFor which allowed me to display the object, but I am wondering how I can access and display the entire JSON data? Here are the relevant cod ...

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

Achieve an exceptional design by organizing the elements to gracefully drift from the left side to the right, seamlessly cascading from

I am currently working on a CSS and HTML layout, and I have a specific vision for how I want the layout to be displayed. It should appear from left to right and top to bottom, as shown in this image: https://i.stack.imgur.com/Q0VmR.jpg Each box within the ...

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

Who needs a proper naming convention when things are working just fine? What's the point of conventions if they don't improve functionality?

I am a newcomer to the world of JavaScript programming and stumbled upon this example while practicing. <html> <head> <script type="text/javascript"> function changeTabIndex() { document.getElementById('1').tabIndex="3" d ...

What is the best way to adjust the height of my website to properly display on all screen sizes

Is there a way to make my web page fit perfectly on the screen in terms of both width and height? I'm familiar with using Media Queries for adjusting widths, but how can I also control the height? Any suggestions on setting the height? I would great ...

Transforming CSS with React Router Links

Why is my CSS being significantly altered by the React Router Link? Is there a way to prevent the Link from affecting the styling? Without Link: With Link: This is the code for the Link. It does not have any style properties. <Link to={`/link/${i ...

Challenge with CSS3 Selectors

I'm struggling to understand why this code works: input[ type = "text" ]:last-of-type:focus{ border:1px solid red; } but this code doesn't work: input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; } The example given with t ...

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

I have been attempting to insert a video into my HTML page, but it's not working properly on my iPhone (I only see a crossed out play button). The video loads fine on desktop and Android devices. This issue isn't browser-related as I encounter th ...

Could Knockout's value binding potentially lead to a script injection vulnerability?

My understanding is that knockout effectively deals with this scenario, but I just want to double-check. Is it correct to assume that when using the value binding with a form control such as input/textarea, there is no risk of a script injection attack? O ...

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

Automatically remove fulfilled orders over 90 days old in Woocommerce using HPOS

Is there a way to configure WooCommerce to automatically remove completed orders older than 3 months? I came across an answer on Stack Overflow, but it seems to have issues when High Performance Orders Storage (HPOS) is enabled. Here's the code snipp ...

Utilize jQuery's .append() function to dynamically insert content into your webpage

I currently have tab elements set up like this: <div class="tab-pane fade active in" id="tab-a"> </div> To populate the content of that tab with a JavaScript string array, I am using the following code snippet: var full_list = ""; for (var ...

Tips for eliminating the default hover and active states from a textfield in Material UI

Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed. Below is my password textfield: (https://i.st ...

Get all the counter values from a Bootstrap table within a function

Suppose I have a table displaying 25 records per page with 10 rows. How can I update the counter values for Entries and Total Entries in my function when I filter by "india"? I already have the showing values but need to retrieve the Entries and Total Ent ...

Determine the size of a file in either megabytes or kiloby

I need to determine the size of a file in either megabytes if the value is greater than 1024 or kilobytes if less than 1024. $(document).ready(function() { $('input[type="file"]').change(function(event) { var _size = this.files[0].si ...

Tips for retrieving a selected date from an HTML textbox labeled as "Date"

My goal was to find the differences between two dates by utilizing an HTML Date textbox. <input type="text" name="datein" id="datein" value="" class="inputtexbox datepicker" style="display: none" is-Date/> <input type="text" name="dateto" id=" ...

Using Ajax to fetch project data from an API

Currently immersed in a personal coding project, I'm struggling to troubleshoot my code. Essentially, I need to retrieve data from an API and display it on my HTML page. The data type is "jsonp" due to CORS errors that required this workaround for de ...