OT: WordPress Approach to Responsive Theming

James Dugger james.dugger at gmail.com
Sun Apr 10 20:52:36 MST 2016


Okay It depends on how custom you want to go.  Both Twitter Bootstrap and
Foundation framework can be utilized.
You can create your own custom theme from scratch or you can create a child
theme that uses a base theme.

To create a child theme that uses a base theme.
1. Copy a base theme (any theme you want to start with) into
wp-content/themes/
2. Make a copy of the base theme directory you downloaded (and all its
content) in the wp-content/themes/ directory changing its name.  It is a
common practice to add "-child" to the end of the directory name of the
base theme used.
3. Go into the new child directory and open the style.css file and change:
    Theme Name: <base_theme>
to
    Theme Name: <basetheme-child

The next line should be Theme URI: leave this the same and add a new line
just below this and add the following:

    Theme Template: basetheme

This tells WordPress that you are using the original theme you downloaded
as a parent theme.

4.  While still in the style.css file in the child directory go to the last
line of the top comment block and just before the css rule declarations and
add:

    @import url('../basetheme/style.css')

Now WordPress will use the parent version of the style.css file unless the
rule is overridden below the @import in the child version.

This is typically how child themes are hooked up.

WordPress always looks for the following files in the child themes folder
for overrides:
index.php
header.php
footer.php
screenshot.png
sidebar.php
style.css

I would also add the function.php file for hooks you need to declare.

5. Applying Bootstrap - Normally the bootstrap directory is copied as a
subdirectory into the theme or child theme directory.  Then the it is
hooked up by either adding @import statements to the css or paths in the
.php files previously mentioned.  See this as an example:
http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial



On Sun, Apr 10, 2016 at 7:43 PM, Keith Smith <techlists at phpcoderusa.com>
wrote:

> Hi James,
>
> All great suggestions and have done all of them.  What I am trying to
> figure out is what is the accepted way to make a theme responsive.  Is
> there a favorite framework such as Foundation or BootStrap... etc in the
> WordPress community.
>
> I was pleasantly surprised to discover WordPress now has several
> handbooks.  https://developer.wordpress.org/themes/getting-started/  No
> mention of making a theme responsive.  Lots of info out there just not
> anything that leads me to understand the "WordPress Way" of making a theme
> responsive.
>
> Thank you so much for your help!!
>
> Keith
>
>
>
>
> On 2016-04-10 19:26, James Dugger wrote:
>
>> Keith,
>>
>> First I am not a WordPress guru, but WordPress themes live as
>> sub-directories in wp-content/themes/ (see
>> https://codex.wordpress.org/Theme_Development [2]) I would start here
>> and read this page.  It will give you an overview of the the structure
>> of theming in WordPress.  Pay particular attention the comment blocks
>> in the stylesheets (on the guid above) The comment blocks are read by
>> WordPress to similar to (for themes) how Drupal uses the .info file.
>>
>> Also look into the use of function.php files.  This is how you add
>> behaviors to a WordPress site.  In it is were you declare predefined
>> WordPress hooks (and for plugins) new hooks you have added to the
>> site.  WordPress is a giant event loop (not unlike Drupal)  In fact
>> WordPress core developers call it "The Loop"  so search the net for
>> that term in context to your WordPress questions, this may help.
>>
>> Also the codex  - https://codex.wordpress.org/ [3]  is similar to
>> api.drupal.org [4]  it is were you learn how the php is structured in
>> WordPress.
>>
>> On Sun, Apr 10, 2016 at 8:43 AM, Keith Smith
>> <techlists at phpcoderusa.com> wrote:
>>
>> Hi,
>>>
>>> Any WordPress theming Gurus out there? I've been trying to
>>> determine the "WordPress Way" of responsive theming. Is it a
>>> framework? Is it home gown within WordPress? What is the WordPress
>>> Way?
>>>
>>> Thanks in advance for your insight!!
>>>
>>> --
>>> Keith Smith
>>> ---------------------------------------------------
>>> PLUG-discuss mailing list - PLUG-discuss at lists.phxlinux.org
>>> To subscribe, unsubscribe, or to change your mail settings:
>>> http://lists.phxlinux.org/mailman/listinfo/plug-discuss [1]
>>>
>>
>> --
>>
>> James
>>
>> LINKEDIN [5]
>>
>>
>> Links:
>> ------
>> [1] http://lists.phxlinux.org/mailman/listinfo/plug-discuss
>> [2] https://codex.wordpress.org/Theme_Development
>> [3] https://codex.wordpress.org/
>> [4] http://api.drupal.org
>> [5] http://www.linkedin.com/pub/james-h-dugger/15/64b/74a/
>>
>> ---------------------------------------------------
>> PLUG-discuss mailing list - PLUG-discuss at lists.phxlinux.org
>> To subscribe, unsubscribe, or to change your mail settings:
>> http://lists.phxlinux.org/mailman/listinfo/plug-discuss
>>
>
> --
> Keith Smith
> ---------------------------------------------------
> PLUG-discuss mailing list - PLUG-discuss at lists.phxlinux.org
> To subscribe, unsubscribe, or to change your mail settings:
> http://lists.phxlinux.org/mailman/listinfo/plug-discuss
>



-- 
James

*Linkedin <http://www.linkedin.com/pub/james-h-dugger/15/64b/74a/>*
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.phxlinux.org/pipermail/plug-discuss/attachments/20160410/2d282bd6/attachment.html>


More information about the PLUG-discuss mailing list