• So, I finally created my very first theme. The design was done by a buddy, and I turned it into a WordPress theme with a few modifications. His CSS is a little beyond my knowledge, and I’m learning that there are “proper” ways to CSS a WP theme. At least, that seems to be the opinion of other theme creators out on the interwebs. The original CSS was not meant for WP at all.

    You can see a sample at:
    https://businesswithjosh.com/vivid/

    and download the files if you desire at:
    https://businesswithjosh.com/vivid-download/Vivid.zip

    On my end, everything looks ok, but I went through a lot of tutorials and consulted many websites to resolve issues that were dated (a lot from around 2008). I have no idea if the way I handled a lot of things are correct/up-to-standards, and the code is messy at best. I’m going through a few checklists I found, of which a lot of items are requiring me to learn more via the Codex, but I wanted to see if anyone had any pointers on next steps or areas that need attention.

    I also have a question about accepted personal promotion via a theme. What I mean is, the sidebar on all pages other than the home page is widgetized, but has default content until a widget is applied to the area. I inserted a couple sites of my own, and that of the guy that designed the original theme. I also included links in the footer. All of this can be taken off, of course; and I’ve seen a lot of other themes do this, but if there is a line that the community as a whole feels shouldn’t be crossed, I would rather not cross it (I don’t wanna be “that guy”). However, I would like to point to our stuff where available.

    On the top of my “to-do” list is the following:

    1. Get a search bar on there, and get it to work. I tried for about 5 minutes, and it didn’t. But I’m sure a few searches in the forum are probably sufficient.
    2. I also want to make use of thumbnails, but I am really bad at aesthetics and want to work with my designer to figure a pleasing way to present them.
    3. I also haven’t installed a single plugin yet, so I don’t know if anything breaks from there. I found a list of some of the most common plugins I should test, so will be doing that in the next few days.
    4. I know I need to create a thumbnail for it or whatever (the box you see in the theme selection page). I haven’t even looked into that yet, but I’m sure that’s not difficult.

    Known Issues:

    The addition of the “/” when using an apostrophe in any of the theme options fields. I have done a few initial searches and have found a few forum threads relating to problems with specific plugins, but this is coming from code that was hacked together by me in the functions.php (about 80% was found online, but it’s likely I did something to cause the problem).

    I am going to look into that further; as requesting anyone to go through that at this point is asking a bit much.

    Every once in a while, I will go to a page and the 3 middle boxes break. This happens to me in FF, but doesn’t appear to in Chrome. I haven’t given IE enough of a look (I’m on a Linux machine tonight and don’t have the browser switcher FF addon). If I refresh a few times, it works itself out. But if a few tests show a trend it will obviously become a priority.

    I’m actually thinking this has something to do with the very slow machine I have, but will also look into it further. Could be the CSS, most of which came from the designer.

    For the homepage to display properly, you must create a “Home” page and a “Blog” page. Then, use a static page as the home via the Settings>Reading options. I know I’ve downloaded other themes that have required me to do so, but I didn’t know if there was a workaround for that sort of thing. I’m sure I’m just not thinking through the logic enough.

    I’m sure I’m missing something, but I’m just really excited to get something together. I have a lot to learn, and have only been at this for 2 days now, but man it’s been so much fun. Been really bogged down with work lately and it was nice to learn something new.

    And suggestions/tips/etc. would be greatly appreciated. Of course, if you wanna use it, both myself and the designer are cool with that. That’s kinda the point anyway, right?

    Thanks again in advance.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Some small suggestions, because i don’t have time to go over the theme in full.

    Add all the WP generated classes, there’s possibly more, but this is the only list i can find.
    https://codex.www.ads-software.com/CSS#WordPress_Generated_Classes

    RE: Search form, just call get_search_form in the appropriate place, header or wherever..

    <?php get_search_form(); ?>

    If that’s problematic, remove the template you have for the search form(searchform.php), and let WordPress pull the default one(you’ll rule out a problem with the template if it doesn’t help).

    Remove unnecessary whitespace from template files.. here’s one example(index.php of your theme)..

    <div class="clip"></div>
    <?php } ?>
    
            </article>

    Seven lines of whitespace.. (one line of space would be fine, but seven is a little silly).

    EDIT: Forum stipped out the extra lines of whitepace, hence why they can’t be seen above.

    Don’t use shorthad PHP tags in template files, again i’m referring to index.php..

    <?
    global $options;

    Not all setups have shorthand tags enabled, it’s good practice to use full PHP tags for any PHP code you write.

    <?php

    and not..

    <?

    The get_settings function is deprecated, any calls to this function should be replaced with get_option

    That’s what i picked up on at first glance.. hope that helps.. ??

    P.S. Overall it looks like a very well done conversion, i’ve seen quite a few done, and this is definately one of the better ones i’ve seen.

    Thread Starter joshgarner

    (@joshgarner)

    That helps a lot actually. Thanks a ton. And thanks for the compliment.

    This is exactly the type of stuff I need. I’ll have most if not all of this done by tonight.

    Thanks again. I appreciate it.

    For a first effort and in a short time it looks stunning. Not sure u need our help at all ??

    Thread Starter joshgarner

    (@joshgarner)

    Well, I wish I could take credit for the aesthetics, but it was that of a friend’s. I just broke it up, made it a WP theme and added some functionality (I’ve always been partial to “business” type themes).

    But thank you very much for the complements. I’m really enjoying myself, and the community is pretty B.A.

    u do have that wierd thig of all the \\\\\\\\\\\\\\\\\\\ in the branding headline………but then u can move on to jquery carousels n stuff………

    Thread Starter joshgarner

    (@joshgarner)

    @root,

    Yeah, that’s bugging the hell out of me right now. It appears any time there’s a quotation (“) or apostrophe (‘) input into any of the fields on my admin theme options page.

    There are a few threads out there dealing with the same issue, but they all revolve around specific plugins. I’m apparently going to have to dig pretty deep to fix that as I am very novice in the ways of PHP.

    Man, it sure is ugly though.

    Have you reviewed Data_Validation?

    Thread Starter joshgarner

    (@joshgarner)

    Hey esmi,

    Thanks, I think that is what I’m looking for. At least it seems to be. I’m still learning PHP as I go, so it’s a bit out of my ability at the moment. I think what I’m looking at, according to the descriptions is using

    esc_html( $text )

    but I’m just not sure how to implement it yet. But I’m pretty sure that’s exactly what I’m looking for. Thanks, esmi.

    You may find the following example is a much better approach to handling theme options.
    https://themeshaper.com/sample-theme-options/

    One major difference you’ll find with this method is that you’ll be storing your options in array as a single option(ie. only one entry in the database) which is hugely preferable to storing each option in it’s own entry(which your theme is currently doing).

    The sample also utilises the settings api for the theme options, and provides a decent enough example of sanitizing differing types of options.

    Alternatively you can always use a method like this to convert your options into a single array of options.
    https://ptahdunbar.com/wordpress/consolidate-options-with-arrays-in-your-wordpress-themes/

    Thread Starter joshgarner

    (@joshgarner)

    Awesome. Thanks, Mark. Let me check that out.

    Thread Starter joshgarner

    (@joshgarner)

    Mark,

    In this code, there is a part that “sanitizes” the input. I assume this is to help with the apostrophes causing issues. I just have a quick question. In the code currently is:

    // Say our text option must be safe text with no HTML tags
    	$input['sometext'] = wp_filter_nohtml_kses( $input['sometext'] );

    So, I would have to add one for each input I create, yeah? This is relating to the first link you sent. I already like this method a lot better. It’s a little cleaner and easier for me to understand what’s going on.

    Thread Starter joshgarner

    (@joshgarner)

    Scratch that, sorry. It appears that that is used to ensure that HTML is not placed into the field.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘My Very First Theme, And a Few Questions’ is closed to new replies.